{"_id":"react-image","_rev":"570-1d0926c3cfef8a611372bc7ec9c4edc7","name":"react-image","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","dist-tags":{"latest":"4.1.0","canary":"0.0.0-277ef34d3ca3c60af714717cad634da94ebf7bd7"},"versions":{"0.0.0":{"name":"react-image","version":"0.0.0","description":"Enhanced Image Component for React.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git://github.com/yuanyan/react-image.git"},"keywords":["image","react-component"],"author":{"name":"Yuanyan Cao"},"license":"ISC","bugs":{"url":"https://github.com/yuanyan/react-image/issues"},"homepage":"https://github.com/yuanyan/react-image","_id":"react-image@0.0.0","_shasum":"cb80f1e02b5bb2161c90a7fecb38922da91e08c0","_from":".","_npmVersion":"1.4.9","_npmUser":{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},"maintainers":[{"name":"yuanyan","email":"yuanyan.cao@gmail.com"}],"dist":{"shasum":"cb80f1e02b5bb2161c90a7fecb38922da91e08c0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0.tgz","integrity":"sha512-Xz3UTEtauVpI0O9jsoDU8ngpGW3UujAYt+2Q2wZ1kotMV7v0xGhxSblAMO+9bqeMhO6K9Fr5nyeDfYQCJdEnwQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHGUXjixCvXec5uwog1g9APEyg0VjVtPvMyhh58Qc2iAIgCL1Bm7aSgo743PGE/cSw5WQBM2ihczndKxDJtkA9fmQ="}]},"directories":{}},"0.1.0":{"name":"react-image","version":"0.1.0","description":"Image Component for React","main":"src/Image.js","author":{"name":"Yuanyan Cao"},"license":"MIT","repository":{"type":"git","url":"https://github.com/yuanyan/react-image.git"},"dependencies":{"react":"^0.12.0","reactify":"^0.17.0"},"devDependencies":{"browserify":"^6.3.3","browserify-shim":"^3.8.0","chalk":"^0.5.1","codemirror":"^5.0.0","del":"^0.1.3","gulp":"^3.8.10","gulp-bump":"^0.1.11","gulp-connect":"^2.2.0","gulp-gh-pages":"^0.4.0","gulp-git":"^0.5.5","gulp-less":"^1.3.6","gulp-rename":"^1.2.0","gulp-streamify":"^0.0.5","gulp-uglify":"^1.0.1","gulp-util":"^3.0.1","merge-stream":"^0.1.6","vinyl-source-stream":"^1.0.0","watchify":"^2.1.1"},"browserify":{"transform":["reactify"]},"browserify-shim":{"react":"global:React"},"scripts":{"test":"echo \"no tests yet\" && exit 0"},"keywords":["react","react-component","image","img"],"bugs":{"url":"https://github.com/yuanyan/react-image/issues"},"homepage":"https://github.com/yuanyan/react-image","_id":"react-image@0.1.0","_shasum":"14dd321edf6acdb40cdc99f543f6658544d1a98f","_from":".","_npmVersion":"1.4.9","_npmUser":{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},"maintainers":[{"name":"yuanyan","email":"yuanyan.cao@gmail.com"}],"dist":{"shasum":"14dd321edf6acdb40cdc99f543f6658544d1a98f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.1.0.tgz","integrity":"sha512-et2ztSzG6FoGE7T/8XzQr0aQDfe2jOdMTOtG/QpWAnhTNBXOgLP+wVuhTHf2rVkbtBJxb8NcRWm/A62V0ZIUfg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF992HY7VyeIqwV8UaDsHLVT4iJkrbZjEdwqtrd4UDRDAiAtfUKt1PJsaDyy09qU6u54s69YlHW8Xg23MMbjMP6mVw=="}]},"deprecated":"v1.0.0 is out! See upgrading guide here: https://github.com/mbrevda/react-image/blob/master/UPGRADE.md#100","directories":{}},"1.0.0":{"name":"react-image","version":"1.0.0","description":"**React Image** is an `<img>` tag replacement for [React.js](https://facebook.github.io/react/) with preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"NODE_ENV=production webpack --config webpack.config.umd.js --bail umd/index.js","build:umd:min":"NODE_ENV=production webpack -p --config webpack.config.umd.js --bail  umd/index.min.js","test":"jest --config jest.json","lint":"eslint src/ -f 'node_modules/eslint-friendly-formatter'","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\""},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader"],"files":["*.md","es","umd","cjs"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"babel-eslint":"7.2.2","babel-cli":"6.24.1","babel-jest":"19.0.0","babel-loader":"6.4.1","babel-plugin-transform-class-properties":"6.24.1","babel-plugin-transform-object-rest-spread":"6.23.0","babel-plugin-transform-react-remove-prop-types":"0.4.0","babel-plugin-transform-runtime":"6.15.0","enzyme":"2.8.2","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","eslint-config-standard":"10.2.0","eslint":"3.18.0","eslint-friendly-formatter":"2.0.7","eslint-plugin-promise":"3.5.0","eslint-plugin-react":"6.10.3","eslint-plugin-standard":"3.0.1","jest":"19.0.2","react":"15.5.4","react-addons-test-utils":"15.5.1","react-dom":"15.5.4","react-test-renderer":"15.5.4","semver":"5.3.0","webpack":"2.3.3"},"peerDependencies":{"react":"^15","react-dom":"^15"},"gitHead":"5374420e9b141fc2859a09856d7f2ee1b5236f8d","_id":"react-image@1.0.0","_shasum":"c82257baf24c2a55b4aaa0bf007e72b421b25255","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.4","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"shasum":"c82257baf24c2a55b4aaa0bf007e72b421b25255","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.0.0.tgz","integrity":"sha512-HSLYDXI1w2v2w9iqKiQ5uHB+91CyhBTkKElF9kdVkKp3MChA9YI4q4vFKZcJQQaNkD4/62OTkQ7XV6SCxDHLYg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiewM4uRHRMCvjXwQchI/qX7cbYcI/jMRar0/w/nml5wIhAI0nI61vHUE6iXlqHho0eqG8I0PHRg0BG/7CU8DGOBTc"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-image-1.0.0.tgz_1492170645613_0.5150964346248657"},"directories":{}},"1.0.1":{"name":"react-image","version":"1.0.1","description":"**React Image** is an `<img>` tag replacement for [React.js](https://facebook.github.io/react/) with preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"NODE_ENV=production webpack --config webpack.config.umd.js --bail umd/index.js","build:umd:min":"NODE_ENV=production webpack -p --config webpack.config.umd.js --bail  umd/index.min.js","test":"jest --config jest.json","lint":"eslint src/ -f 'node_modules/eslint-friendly-formatter'","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","codecov":"codecov"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader"],"files":["*.md","es","umd","cjs"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"babel-cli":"6.24.1","babel-eslint":"7.2.2","babel-jest":"19.0.0","babel-loader":"6.4.1","babel-plugin-transform-class-properties":"6.24.1","babel-plugin-transform-object-rest-spread":"6.23.0","babel-plugin-transform-react-remove-prop-types":"0.4.1","babel-plugin-transform-runtime":"6.15.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","eslint-config-standard":"10.2.0","codecov":"2.1.0","enzyme":"2.8.2","eslint":"3.18.0","eslint-friendly-formatter":"2.0.7","eslint-plugin-import":"2.2.0","eslint-plugin-node":"4.2.2","eslint-plugin-promise":"3.5.0","eslint-plugin-react":"6.10.3","eslint-plugin-standard":"3.0.1","jest":"19.0.2","react":"15.5.4","react-addons-test-utils":"15.5.1","react-dom":"15.5.4","semver":"5.3.0","webpack":"2.4.1"},"peerDependencies":{"react":"^15","react-dom":"^15"},"dependencies":{"prop-types":"^15.5.8"},"gitHead":"e37f12c5c9d98ac4aacac76d2ee8ec8c895a6cbd","_id":"react-image@1.0.1","_shasum":"eb3178a7b2a09945310a4bea6f89317d8b6f8c40","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"shasum":"eb3178a7b2a09945310a4bea6f89317d8b6f8c40","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.0.1.tgz","integrity":"sha512-Oo14I+aDzjw4CE1YzToGe6bjbP2U6KR/EgasHuRv7+uNwght2RePFINgJSJnKRQcaCNyb0wCecT7a9OlUG1E7g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVxtwE+M4WHus4W+l7709eE8puNUw9knjXfCEtVriTTAiA8lEITBLrOSUYHoN09uPfhfQm42VX40wFZrVrerPOGSA=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-image-1.0.1.tgz_1492351717235_0.21291615976952016"},"directories":{}},"1.2.0":{"name":"react-image","version":"1.2.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"NODE_ENV=production webpack --config webpack.config.umd.js --bail umd/index.js","build:umd:min":"NODE_ENV=production webpack -p --config webpack.config.umd.js --bail  umd/index.min.js","test":"jest --config jest.json","lint":"eslint src/ -f 'node_modules/eslint-friendly-formatter'","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","codecov":"codecov"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader"],"files":["*.md","es","umd","cjs"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"babel-jest":"21.2.0","babel-cli":"6.26.0","babel-eslint":"8.0.1","babel-loader":"7.1.2","babel-plugin-transform-class-properties":"6.24.1","babel-plugin-transform-react-remove-prop-types":"0.4.10","babel-plugin-transform-object-rest-spread":"6.26.0","babel-plugin-transform-runtime":"6.23.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","eslint-config-standard":"10.2.1","codecov":"3.0.0","enzyme":"3.1.0","enzyme-adapter-react-16":"1.0.2","eslint":"4.10.0","eslint-friendly-formatter":"3.0.0","eslint-plugin-node":"5.2.1","eslint-plugin-import":"2.8.0","eslint-plugin-promise":"3.6.0","eslint-plugin-react":"7.4.0","eslint-plugin-standard":"3.0.1","jest":"21.2.1","react":"16.0.0","react-addons-test-utils":"15.6.2","react-dom":"16.0.0","semver":"5.4.1","webpack":"3.8.1"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.6.0"},"gitHead":"1f5f8da74c60b9b39d1988d15096130c2b442459","_id":"react-image@1.2.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.1","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"integrity":"sha512-3eGaps+izq8NVYDk9k1DFTkAT1c0qygxeklrzYRDeoj4TfD7eyekckx/yAiGAwo4ePY1FzL1ndtsywzICoPU+Q==","shasum":"67ad0731bd151c85619cb0b183f6fc7d2ece8608","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXggo7sNopFRil/J/4OF2UCiqgrM9nQkT614FhfR622AiBwqc4PfIXTr9wHN9AAlzJuRTe/KGYqfE2xerd69LBzqQ=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image-1.2.0.tgz_1509300870046_0.9857938883360475"},"directories":{}},"1.3.0":{"name":"react-image","version":"1.3.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"NODE_ENV=production webpack --config webpack.config.umd.js --bail umd/index.js","build:umd:min":"NODE_ENV=production webpack -p --config webpack.config.umd.js --bail  umd/index.min.js","test":"jest --config jest.json","lint":"eslint src/ -f 'node_modules/eslint-friendly-formatter'","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","codecov":"codecov"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder"],"files":["*.md","es","umd","cjs"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"babel-jest":"21.2.0","babel-cli":"6.26.0","babel-eslint":"8.0.1","babel-loader":"7.1.2","babel-plugin-transform-class-properties":"6.24.1","babel-plugin-transform-react-remove-prop-types":"0.4.10","babel-plugin-transform-object-rest-spread":"6.26.0","babel-plugin-transform-runtime":"6.23.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","eslint-config-standard":"10.2.1","codecov":"3.0.0","enzyme":"3.1.1","enzyme-adapter-react-16":"1.0.4","eslint":"4.10.0","eslint-friendly-formatter":"3.0.0","eslint-plugin-node":"5.2.1","eslint-plugin-import":"2.8.0","eslint-plugin-promise":"3.6.0","eslint-plugin-react":"7.4.0","eslint-plugin-standard":"3.0.1","jest":"21.2.1","react":"16.0.0","react-addons-test-utils":"15.6.2","react-dom":"16.0.0","semver":"5.4.1","webpack":"3.8.1"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.6.0"},"gitHead":"bc70eb3b73874e187d7c5cd15a2084d2f34b26b4","_id":"react-image@1.3.0","_npmVersion":"5.5.1","_nodeVersion":"9.0.0","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"integrity":"sha512-TMZLlVoYNDA4kJfFIY+Fl91M5iMnFWkHiRsAs2jn6vlG6NjnzZuxoV3A6uAQrV8jMtwdLp/Zk5AsMvn2Lqytbg==","shasum":"8336768607f622b37a31571a9a3f038cef500a95","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.3.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtPUvJ9duW5pL22boRmvr+uCGmQ6F08tU+V+tnjbiWEAIhAP2yxkB/U3OAdV2BbiUXlXyiJaKxwidkpYoi+0A8EM+/"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image-1.3.0.tgz_1509968106349_0.39297014800831676"},"directories":{}},"1.3.1":{"name":"react-image","version":"1.3.1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"NODE_ENV=production webpack --config webpack.config.umd.js --bail umd/index.js","build:umd:min":"NODE_ENV=production webpack -p --config webpack.config.umd.js --bail  umd/index.min.js","test":"jest --config jest.json","lint":"eslint src/ -f 'node_modules/eslint-friendly-formatter'","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","codecov":"codecov"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder"],"files":["*.md","es","umd","cjs"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"babel-jest":"21.2.0","babel-cli":"6.26.0","babel-eslint":"8.0.2","babel-loader":"7.1.2","babel-plugin-transform-class-properties":"6.24.1","babel-plugin-transform-react-remove-prop-types":"0.4.10","babel-plugin-transform-object-rest-spread":"6.26.0","babel-plugin-transform-runtime":"6.23.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","eslint-config-standard":"10.2.1","codecov":"3.0.0","enzyme":"3.1.1","enzyme-adapter-react-16":"1.0.4","eslint":"4.10.0","eslint-friendly-formatter":"3.0.0","eslint-plugin-node":"5.2.1","eslint-plugin-import":"2.8.0","eslint-plugin-promise":"3.6.0","eslint-plugin-react":"7.4.0","eslint-plugin-standard":"3.0.1","jest":"21.2.1","react":"16.0.0","react-addons-test-utils":"15.6.2","react-dom":"16.0.0","semver":"5.4.1","webpack":"3.8.1"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.6.0"},"gitHead":"ef2a4255facceb01642e72c2325305f1bd54ed6e","_id":"react-image@1.3.1","_npmVersion":"5.5.1","_nodeVersion":"9.1.0","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"integrity":"sha512-zXwg0JHwZ3zfm+c4hGQDfO04RL8GSNLToKKnTrnCtjt2w+0xSF90IkUCGeHGRiAwv7TFeLq3nIgZxf11ms57FA==","shasum":"32af60126ea92f4860df46697eea42c1661cef87","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.3.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBhST/PNdZWedyZQ4F6xkrAMABVqxv1FBkYeKcSZka2QIgKtPNYvvKWV1YzL8h/dugxQq8t/9cO3KvWtUQeBB+vwM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image-1.3.1.tgz_1510416131193_0.06511604133993387"},"directories":{}},"1.4.0":{"name":"react-image","version":"1.4.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min && node ./webpack.site.js","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"webpack --config webpack.config.umd.js","build:umd:min":"webpack -p --config webpack.config.umd.js -o umd/index.min.js","test":"jest --config jest.json","pretty":"prettier src/**/*.js --write","dev":"node ./webpack.site.js --watch --server","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","codecov":"codecov"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"files":["*.md","es","umd","cjs"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"babel-cli":"6.26.0","babel-jest":"23.4.2","babel-loader":"7.1.5","babel-plugin-transform-class-properties":"6.24.1","babel-plugin-transform-object-rest-spread":"6.26.0","babel-plugin-transform-react-remove-prop-types":"0.4.14","babel-plugin-transform-runtime":"6.23.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","clean-webpack-plugin":"0.1.19","codecov":"3.0.4","commander":"2.16.0","enzyme":"3.3.0","enzyme-adapter-react-16":"1.1.1","express":"4.16.3","jest":"23.4.2","prettier":"1.14.0","react":"16.4.2","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.4.2","semver":"5.5.0","serve-static":"1.13.2","uglifyjs-webpack-plugin":"1.2.7","webpack":"4.16.4","webpack-cli":"3.1.0"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.6.2","babel-runtime":"^6.0.0"},"gitHead":"3c9fb0d11ab834f57621c55a02f3f25315f25205","_id":"react-image@1.4.0","_npmVersion":"6.2.0","_nodeVersion":"10.8.0","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"integrity":"sha512-/kR+EhAEVT7Un40xvew2sl+hf4p2mMXxX0sZffgGaWTVlNcqLyG7/ZU6vGrelKxKPLxsQS9aYM20t4pgk1KBDg==","shasum":"b3a502799926a63957dae335004f637aa5bc3a1f","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.4.0.tgz","fileCount":8,"unpackedSize":39645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZHGSCRA9TVsSAnZWagAAxw0P/24M9qJcRV3Hj2bZskzi\nBxaRZyw94aA12QYPeH9SpbvGBQf5ncLUDUHuVdGBDrX8zl+DEw8ZSz6xyLaD\n8m+NUn8J2WSiqlakzWl7wkGIYrSdbqy/UDB7jrhhSO0KMZiY/c8orx6S3OLk\nx6VT3SEK9pstKN9YFHnsAvXuohGRrZA9hGzojsHUURb3jadnZgri/fbBT/Da\ngbV8w+Zfv8tw5VHspNAOXtDQusPjjVUOW2D+hJu50HrThef3ZoLkHi+gNnLH\n/uHctgKMcYrE+oDROL79B/d0hQXJIya0vabAlLUTdNbSlWWWPcEDnl0XO/hl\nxIOzIjnLdSSjuDt7qQzhGR34Dduycoja4gm7K2rNK3dZp9VONAoTyaDbovxi\n7kvYe0H5smsPEtHk5kz+x37sEdSzMUKW/qnWPIgqE7vFEAT0jGQs8ZRNQrHf\nwionprzp9Q3lAMVqC6h4lMr8l2Z+l9efyLg1hxWW1JhrzwdzW1vcH6l9IlrY\ng9EAfEkwH7VBS1/5zhAhJwAXEO3ucQhsYa/nIAgep75p2UujjvK4DWJziHNu\nO3X75sHVXC71IxXJa9cp4b8iWmgjVlrbcqr3NlRl47f0PgHHFdVKzTvsWSri\nbrfP0AF2uNgSMM0q9EY3+wuem/7chUdyC+cxNnCVs7/p3sl96mhoT1W24BJp\ngW3D\r\n=8HIj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBvN8JHxxxdl74UwqQVBQV/ashob99cH8O9yvCJANBHAiAlb38GmzsP5+36oUjUKrzc+OUVwA4q3HZxAeFUy4uQkQ=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_1.4.0_1533309329949_0.12914798613841327"},"_hasShrinkwrap":false},"1.4.1":{"name":"react-image","version":"1.4.1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min && node ./webpack.site.js","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"NODE_ENV=production webpack --config webpack.config.umd.js","build:umd:min":"webpack -p --config webpack.config.umd.js -o umd/index.min.js","test":"jest --config jest.json","test:built":"jest --config jest-node-ssr.json","pretty":"prettier src/**/*.js --write","dev":"node ./webpack.site.js --watch --server","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","codecov":"codecov"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"files":["*.md","es","umd","cjs"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"babel-cli":"6.26.0","babel-jest":"23.4.2","babel-loader":"7.1.5","babel-plugin-transform-class-properties":"6.24.1","babel-plugin-transform-inline-environment-variables":"^0.4.3","babel-plugin-transform-object-rest-spread":"6.26.0","babel-plugin-transform-react-remove-prop-types":"0.4.14","babel-plugin-transform-runtime":"6.23.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","clean-webpack-plugin":"0.1.19","codecov":"3.0.4","commander":"2.17.1","enzyme":"3.4.1","enzyme-adapter-react-16":"1.2.0","express":"4.16.3","jest":"23.4.2","prettier":"1.14.2","react":"16.4.2","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.4.2","semver":"5.5.0","serve-static":"1.13.2","uglifyjs-webpack-plugin":"1.2.7","webpack":"4.16.5","webpack-cli":"3.1.0"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.6.2","babel-runtime":"^6.0.0"},"gitHead":"83ecfcfb88f95379751b87d1597187dd828686b5","_id":"react-image@1.4.1","_npmVersion":"6.2.0","_nodeVersion":"10.8.0","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"integrity":"sha512-7F134wh3pOK+uKn7abPVdEo8i++18wN398ZDmt2bfW4qvAQN+//JqrucYyJwy7IQEh3vrGX386f80dDpLhvLZQ==","shasum":"57d94a0184688c45a0c14d8f743a6291f0b43fe9","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.4.1.tgz","fileCount":10,"unpackedSize":41965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbbAjsCRA9TVsSAnZWagAA3UEP/2Iyxmb9+Ew/plS5UTGr\n+J8QORmlf4hnj5M5jO4E2ttaYGD6gDSFW7QJC2HjaSUPyVq9CAUL9c4mRBiF\nFSpRd2rf+jjPzLzpC5dYdDggZQEDeCAHeX44b4lrKUkhjE5JHz6fBps4snBH\nYOEhTSMQdHHfb87gqYQ8mMrOH3hdIafCdHkhjKBLHs2TzdYNFD7F9bYab73p\ntv/DGqKqO0fGWHwSBwF0OLbWs72L92o8tgxwPvup+LOEI7vC4rcTzijfd3WK\nxTfbPKlvd2vuh9r0/Uox4jFKSk/ji1zMGC4R9FXFrDsN6MXPtwzFqu9utdgt\nXBAaEKzc1eZyrA6z5TADwEW60mqDMclP34aD+4rYbX8NGtJaA4JN03/ss3qL\nnRwRqRBuWJHQ8ZBVTIIYYlffvic4N4q2JvUoL+lRlY7TsW74cVnm+rDApz5e\nq++dh0jtPPxX3J2z33paE6K8yIupZWVzpAI+wcmmQTtUNCwwIm0Q8VO84fNI\n+6Vv3SB/bAbQREVVp1hgnjV1vmhke81L73lWDCm6PBilq/fko+fpYNp5t3qN\nmz+FGEPfSAkORCqSboMs0Xt3CG8pLTSX991edRsM6SvDeWSr2AMPnGiZ6hZO\niRUVdAxCTDDAstZdE5g+ABryWze5nRQcdOho5hIjqPt/E5npz9AMNtMHiF/d\n0Nkv\r\n=L3OF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAw6Frk2shrS9B1aNH9lWl9DV5ps2cqIfYST5XCcJN6fAiAlXvH48H8uBa4/JfFNUXoScPCda2GH2Aso7vvW9//ZNA=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_1.4.1_1533806828122_0.10193054060660112"},"_hasShrinkwrap":false},"1.5.0":{"name":"react-image","version":"1.5.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min && node ./webpack.site.js","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"NODE_ENV=production webpack --config webpack.config.umd.js && cp src/*.test.js umd/","build:umd:min":"webpack -p --config webpack.config.umd.js -o umd/index.min.js&& cp src/*.test.js umd/","test":"jest --projects jest*.json","pretty":"prettier src/**/*.js --write","dev":"node ./webpack.site.js --watch --server","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","codecov":"codecov"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.1.0","@babel/core":"7.1.0","@babel/plugin-proposal-class-properties":"7.1.0","@babel/plugin-proposal-object-rest-spread":"7.0.0","@babel/plugin-transform-runtime":"7.1.0","@babel/preset-env":"7.1.0","@babel/preset-react":"7.0.0","@babel/runtime":"7.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"23.6.0","babel-loader":"8.0.2","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.18","clean-webpack-plugin":"0.1.19","codecov":"3.1.0","commander":"2.18.0","enzyme":"3.6.0","enzyme-adapter-react-16":"1.5.0","express":"4.16.3","jest":"23.6.0","prettier":"1.14.3","react":"16.5.2","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.5.2","semver":"5.5.1","serve-static":"1.13.2","uglifyjs-webpack-plugin":"2.0.1","webpack":"4.19.1","webpack-cli":"3.1.1"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.6.2","babel-runtime":"^6.0.0"},"gitHead":"cff9c6a9807bf1eebedc34baba56e2ecef1405aa","_id":"react-image@1.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"integrity":"sha512-B9s9RJVmHmn58AK58j1YEwhzYyjcOOIMiD64CLQihpKS5HsRZcF0FVKvOUQUmvyJ9hnu9Bq/AHJKMj9Ra0Dx3A==","shasum":"d0a4eed20cc07f64a38ac8e60bc4d405c7828bfc","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.5.0.tgz","fileCount":13,"unpackedSize":67493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqnSoCRA9TVsSAnZWagAAJrEP+we0FjCYKEl1C1UAw8fv\n0noPp/8mGFMUWU7Dc2JfQAr9Qj1Tkv7MMkxIf5Tma6zNWixOpZW5xnYiOMHU\nvOESnrbL0tHrvq5nX3LlXQwFN/XLsrHbs3eVg12FF3zAyRkrPW5EoN9KgATX\nENwePBgLHJBneF0b0LszI0SF68m/yYK5zl8gdlvglolxntBDswXeONYBr6Qk\n/2Wi/qa8aExp0O/8I+AH9RGDzQET+nrOq03ozvmfIiqBm6CUgyldihG7Lz+z\nZeuJXlhjJ0DD7tHY8xDjjLlsi3HofnYzdUszCRU8GKU5GpRaFdH3gxlCtSwf\nCXx7OIfFsW1kCX6T5gY2Nk7fgx1FSTNXAJlftJlydJN/au0m3K6es5GmtikR\nkmnaHXOVkqTDsvaevb3ycmpe6w/vEbz0hseB+iDGu0MoKXSHXLDTF0kziHQa\nY6+di0KrJCcgJqNI6BSxdeOHEshvWlkFhE68TC44ea3Nh44CET7NXJZ+f9eK\nZcWXc+y62PVy4r1g0YGYOoAZY+gwLeWU27EDjtg9v22IkiyuvO8abRNh6Jd+\ne7finGlGaEQvm+08VuKjW2RgZ7eiU7mI1jE+xUFFfLWOnSWg+cv2g28xJms8\nLld+yuh3SLJVuVITJH0QEUs/31c0gMY2Cw9VWHnMGgGvsovgL6vN2ILGyekp\n4vaD\r\n=ccg/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBVQDwSJrGIP31d9RWNQA+PYaML+eryU2F8LPjw4+xKAiEA9XrJ3hcnWrczNK0oMs0eszTfW19kW+bDJMU5jglYn8Q="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_1.5.0_1537897640039_0.5703469957534804"},"_hasShrinkwrap":false},"1.5.1":{"name":"react-image","version":"1.5.1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min && node ./webpack.site.js","build:cjs":"NODE_ENV=production BABEL_ENV=commonjs babel src/ --out-dir cjs/ --ignore *.test.js","build:es":"NODE_ENV=production BABEL_ENV=es babel src/ --out-dir es/ --ignore *.test.js","build:umd":"NODE_ENV=production webpack --config webpack.config.umd.js && cp src/*.test.js umd/","build:umd:min":"webpack -p --config webpack.config.umd.js -o umd/index.min.js&& cp src/*.test.js umd/","test":"jest --projects jest*.json","pretty":"prettier src/**/*.js --write","dev":"node ./webpack.site.js --watch --server","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","codecov":"codecov"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"jsnext:main":"es/index","module":"es/index","main":"cjs/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.1.0","@babel/core":"7.1.0","@babel/plugin-proposal-class-properties":"7.1.0","@babel/plugin-proposal-object-rest-spread":"7.0.0","@babel/plugin-transform-runtime":"7.1.0","@babel/preset-env":"7.1.0","@babel/preset-react":"7.0.0","@babel/runtime":"7.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"23.6.0","babel-loader":"8.0.2","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.18","clean-webpack-plugin":"0.1.19","codecov":"3.1.0","commander":"2.18.0","enzyme":"3.6.0","enzyme-adapter-react-16":"1.5.0","express":"4.16.3","jest":"23.6.0","prettier":"1.14.3","react":"16.5.2","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.5.2","semver":"5.5.1","serve-static":"1.13.2","uglifyjs-webpack-plugin":"2.0.1","webpack":"4.19.1","webpack-cli":"3.1.1"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"@babel/runtime":"^7.0.0","prop-types":"15.6.2"},"gitHead":"3a2b17adc9a0f383ce4134f0befb8f5e34c62cca","_id":"react-image@1.5.1","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"integrity":"sha512-UHVXGmv9NttI5nWlvXdqxqzbfRebZSmHTT4n5hsUb0uElYXwE71+Zla4/KZjjU96Z6eZPT66OFSVwd2wwBOKyg==","shasum":"e900baa3f48b15ca94500542a2aff762c94431b8","tarball":"https://registry.npmjs.org/react-image/-/react-image-1.5.1.tgz","fileCount":13,"unpackedSize":67520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqnfYCRA9TVsSAnZWagAA7u4P/in+1h7oQ+oOQ1Coyazl\nH6G/2paE7WmmD0iVfSZdNWlcfl8NkVeoPteBqgltb+ZbyB9J5eUzqNjPL06O\nr4vxrot8M5Qr/inWo6n5MF8s3NqOlVgI5jrShVeRZ5072evBkAq5Q+W4iw5z\nmxzGPKg59Ov2UcZ24wX1e9WspA0ZOCCFukFAVFYhYlngcrV7tzp63dCNc3Qx\naS7j3untva18CSXa8oWH53obnzCdcQGCReFkHqvoVriAB+eUwOJtHllpP8cH\ns4DSevXWrNcjsHtDaC/qzcaoAXle7xec8KfFrSsKVIfVnfDz1SfwHboj61uX\np0PfkLJXLcgBpDg+L0T082EwXhxqwBVuQ6XFvTVfMLy10xumhrdkXl2/eoeh\nr+op2n0ZM/mUS5TIJLXcA2MlV4Yu27qbYjue4/TeZ8C9wcQ7iiRns3zjvGnR\ns36KLa4Gu+oIwCP57ZXcSz2O0orE4ACPJMtWfC4X1FRrrT0ZPp9J0i4o6XI7\nfKgggJy3tfdiT0DwwjTQASUmcFizNvEVychipIW14CbkBY3wq7ihpdB3ZDOM\nJDXVMRK3cnZSZNb3+wZ8tS/PSBzcMKUHcPXID0m5VL+/9bjgSPtC9PWVmrV7\nUxpTO+n3B9tB7IFiq/kCacNhi+NiV94xVtt3hLmSaK2tOQmyhdFCA2+gldKa\np26+\r\n=pfy/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3vVyRV55cOse/XixMHDew8VFThQdIc+TJa8gnRIlLMgIgfxdu4V6woIC3kJvQMUXc2D6JhHhfQVc+5mt2MCnlcGI="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_1.5.1_1537898455986_0.9062094886225358"},"_hasShrinkwrap":false},"2.0.0":{"name":"react-image","version":"2.0.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && node ./webpack.site.js && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"node ./webpack.site.js --watch --server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.2.3","@babel/core":"7.2.2","@babel/plugin-proposal-class-properties":"7.2.3","@babel/plugin-proposal-object-rest-spread":"7.2.0","@babel/plugin-transform-runtime":"7.2.0","@babel/preset-env":"7.2.3","@babel/preset-react":"7.0.0","@babel/runtime":"7.2.0","babel-core":"7.0.0-bridge.0","babel-jest":"23.6.0","babel-loader":"8.0.5","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.21","clean-webpack-plugin":"1.0.0","codecov":"3.1.0","commander":"2.19.0","enzyme":"3.8.0","enzyme-adapter-react-16":"1.7.1","express":"4.16.4","jest":"23.6.0","prettier":"1.15.3","react":"16.7.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.7.0","rollup":"1.1.0","rollup-plugin-babel":"4.3.0","rollup-plugin-babel-minify":"6.2.0","rollup-plugin-node-resolve":"4.0.0","semver":"5.6.0","serve-static":"1.13.2","uglifyjs-webpack-plugin":"2.1.1","webpack":"4.28.4","webpack-cli":"3.2.1"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"@babel/runtime":"^7.0.0","prop-types":"15.6.2"},"gitHead":"ac2a97b97aed591185636fc3d8e5757e87f67ab0","_id":"react-image@2.0.0","_npmVersion":"6.5.0-next.0","_nodeVersion":"11.6.0","_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"dist":{"integrity":"sha512-yWf+UAtkavJFSG1Qa4p111KncN7/a8dAOUUi5On3jjwZU1tzMXFpBnOFp04vYQr8fJmS/7ePp1OsK440WZ4fLA==","shasum":"c1d5f21351d3957ff54c9818b8adb26cd0d4204a","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.0.0.tgz","fileCount":12,"unpackedSize":49391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOyDMCRA9TVsSAnZWagAAEA0P/A8zIAhcFnW8RQrUuspM\nnJL/pbu8IkvtB9l6JVUarj51QEiOyJjjiNqaxLhXm3UV0ePE3RJ2S7b9ytpQ\n9qPTJTkc6GCFhkJv/SlnSTiZPnX60fJ1Hok+L5BE3job74pCuIO+mksD50qf\nMV9sXspfNGMxVYy+T69uXGJXb1CkUbl5YzEecFCpne/Cnf/t8g7cD0OOh+hV\n6Qfx/ZqOmm/csRzpN5f8nNdVr4A60KOMIslFzJLG50Iy9CYtXw7zA28wuQsu\nE9g4XVkE3lIHe0n8NFACFKlOQrTqTHxB32FNIxrdbzQJAaoZ7XiLJ74xZrWg\nMfyGqwgLl917zT26AtgujlukavYAG7CsnufmtgnmII0KPYFdB6bBPTD9TAKy\n8YFPE6VhYVV/yE9pdOkHpXPhz8Wlo6k9T3jmwiE5ws1IY6yFFm8VWfEynSI5\n5WnDTgPI9R+DdyX9tRBnJd8OKEhRAGataqbPYoW/XQz6YrD7YA64QtCDEfbU\n0/xNjYo+MNSYzGkFJ8h6+J/0uVK43L665e4W6QiI7hzlornqQbfOMS1jN/eF\nxcKFwj2xccmeGY07RhkJ1zD6ta9xAyHXbb7tD0312B2DcoJI3TDlXwGXT+w0\nWyEe/kC5iM59Pth7WEUHdeh9u9ISJQWHPAxjHQZ43FYendmGBQ8UYpXTRiYd\nHb/H\r\n=eueJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtwvf91u9AybzNZAIKgOhJGjxydOnX+1Stjpo43nNNyAiEAxJprxaycp1KVTQygWyYgBxRLDjeO+L+k1d6a5qfeUr4="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.0.0_1547378892119_0.9951964664956015"},"_hasShrinkwrap":false},"2.1.0":{"name":"react-image","version":"2.1.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && node ./webpack.site.js && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"node ./webpack.site.js --watch --server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.2.3","@babel/core":"7.4.0","@babel/plugin-proposal-class-properties":"7.4.0","@babel/plugin-proposal-object-rest-spread":"7.4.0","@babel/plugin-transform-runtime":"7.4.0","@babel/preset-env":"7.4.2","@babel/preset-react":"7.0.0","@babel/runtime":"^7.4.2","babel-core":"7.0.0-bridge.0","babel-jest":"24.5.0","babel-loader":"8.0.5","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"1.0.1","codecov":"3.2.0","commander":"2.19.0","enzyme":"3.9.0","enzyme-adapter-react-16":"1.11.2","express":"4.16.4","jest":"24.5.0","prettier":"1.16.4","react":"16.8.5","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.8.5","rollup":"1.7.0","rollup-plugin-babel":"4.3.2","rollup-plugin-babel-minify":"8.0.0","rollup-plugin-node-resolve":"4.0.1","semver":"5.6.0","serve-static":"1.13.2","uglifyjs-webpack-plugin":"2.1.2","webpack":"4.29.6","webpack-cli":"3.3.0"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"35c155dec6eb71d0c70aa21a6ae80ce483c88b7a","_id":"react-image@2.1.0","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-RWz5c/68piAOIujJmE2BJubWXjCfja2CQKVAJRmVpv6+P8y9SzK5Klaiyxolpl5koRIMzwvybOme5c+9IsPdfQ==","shasum":"8f0db550de7122f235c7b53dabeb3cc73434ac4e","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.1.0.tgz","fileCount":12,"unpackedSize":49724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcl14mCRA9TVsSAnZWagAAunkP/23dwB2g2Sf4fyNAjvaR\n9Dw1XY3mlDF8wwUQkx48HkSgDJNQcCXnmA56u1Yv8/9n8p0/8WRtif6zuWux\nT40L8gbvRgXTHiKmB77nW/ZLve7Dd6zMtZXdL8D4vjbbAxdWS/Jz66QTxdZw\nSTg9slDaUxUdjkiKpteuinSibRGf1owA83+BP31haBW9kqBsFRX9FKLpm8r6\nIabin5btKpBQoV11zT57lxD80+U1AZCvGGD2lZ2jOne55LtF5eVjiRtS57lY\nde1aBI6fJ5tbNPxV0EKLVfrdkKvRB+siVHn8vlbRzqSjjMy3DZfMHkt6WE8z\nZTH2fwRL/HnF6iPEUnpWuDmIQ178e7b2NQfqGcqCoYqV7kwk7Q/6f8PUm28U\n90ihhrMTLHmFi4yeCSGxKVcqglGHZWm+duazJwCUPpCmcAKwUQ5vNTEhZhok\n9qukAzSUSfFwra4roUI3NKrDLbCd4bltq6JDIELIqThjkaULJwIriFFoWH5b\nh/sJea4muwSwXkDlIcCoUvmgc2LhV+lrSRUIQmLhWs2WTSzomfjE2mYbWz4o\nFB3gfzKBtByD3mRpzV7Ubmo9tSgdWeJAcW2A+oPXJZv99UNeeqwS78SiavMt\nsiRZofBRNJwfWYRnefiN/PmvgEQMFvYIa8H17ZdDBtE6GArntfn+4DgXPm3l\ngabM\r\n=1/J5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPlf33cYxVyNEMBcE+C1CErnIQ3G8PU6BML7MA5zd5UQIhAN2tyA9yCyXGoTE335ekNVdG939jnJijIXDJOeoe2xFz"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.1.0_1553423909742_0.6005490748075644"},"_hasShrinkwrap":false},"2.1.1":{"name":"react-image","version":"2.1.1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && node ./webpack.site.js && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"node ./webpack.site.js --watch --server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.2.3","@babel/core":"7.4.0","@babel/plugin-proposal-class-properties":"7.4.0","@babel/plugin-proposal-object-rest-spread":"7.4.0","@babel/plugin-transform-runtime":"7.4.0","@babel/preset-env":"7.4.2","@babel/preset-react":"7.0.0","@babel/runtime":"7.4.2","babel-core":"7.0.0-bridge.0","babel-jest":"24.5.0","babel-loader":"8.0.5","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"1.0.1","codecov":"3.2.0","commander":"2.19.0","enzyme":"3.9.0","enzyme-adapter-react-16":"1.11.2","express":"4.16.4","jest":"24.5.0","prettier":"^1.16.4","react":"16.8.5","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.8.5","rollup":"1.7.0","rollup-plugin-babel":"4.3.2","rollup-plugin-babel-minify":"8.0.0","rollup-plugin-node-resolve":"4.0.1","semver":"5.6.0","serve-static":"1.13.2","uglifyjs-webpack-plugin":"2.1.2","webpack":"4.29.6","webpack-cli":"3.3.0"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"bd00f496f72f1875e1cb085ab4aed33ca7cc9d1b","_id":"react-image@2.1.1","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-rUsmeLCOJlzy/LBW2s8JGC1VS0TSBUdLDCdTdU7u3AenHBQM0aTzL3gtLnOJaXpshFUAPZxaLrxgmD7d3qkUMA==","shasum":"325b3f9fe828347b6cc063a59bc8e27f1ca46b00","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.1.1.tgz","fileCount":12,"unpackedSize":49823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcl37WCRA9TVsSAnZWagAA6DIP/jjF/NGZO984y0dKo6Ne\nWsnElgmTRR1ciGyc4EQR9G+aihnI5gJAxJWT3vd6w2j1rmox9NBcsK2DK4QI\n+u6yjgG4mVJowhQ+R/atlAAHoJO5XCU48pRFFTEABbGOhDB3UL1P79QtDiVT\nisqslTQacpaKHrmgxXAEVf3HUlwuUQwZrB1HDKcQPEyoiB0AZn3Sv2oyNQIr\nKZUfZFJMmfNBuJuk2+Valg75APjMJw3Yl6C9HjKvqlVp/ryoJIf1cStKc5Bv\nG/WNzgagr6y+FD21QPVpndXC76bvxUeeTauShGNcDnA/KxGVBVCQQmtiDyej\nm1iXu2a5NtxKAxoDn4lc862OIV0Jx0p/TPh2POGHFL2MyonGEik190e4Aven\n9/netCl8HXiUVG1P7yuhVfZ9pFDKRJDM1HQHCrBhl7xuHtD9ihs//MQrjOk/\nW2FvEtdY8bmd7sqsPrpy62XtczQ6qSzEl9hC03XJJV10VTnJZOY1WBKqF4Da\ncEM7oj8mXf6H7lj43VKxbrK5lWYZYJeOBIK+ZZ1tZqTM05vA/liLDKEhkY3j\n9YCKLoXQIq0odbSF4dwW3NssYd6rOHs33sW66aPuIn/d1z+EJ1s1b4BMQKAE\n/JSfg5BRa8ygc/1XpTQpXUcNxKeBAk6ICZvNqIaQxRKWh1cn85/FilfH2wNr\nSIHo\r\n=w/2a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBZqZupKuDDwB0ST03FWTghE77P/blOPmh4mQT7kkcCAiEAjvwsY2xV1PKnpsikengESQT172fLipp2Rk6mbmm2ijE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.1.1_1553432276657_0.5123227679711695"},"_hasShrinkwrap":false},"2.1.2":{"name":"react-image","version":"2.1.2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && node ./webpack.site.js && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"node ./webpack.site.js --watch --server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.4.4","@babel/core":"7.4.5","@babel/plugin-proposal-class-properties":"7.4.4","@babel/plugin-proposal-object-rest-spread":"7.4.4","@babel/plugin-transform-runtime":"7.4.4","@babel/preset-env":"7.4.5","@babel/preset-react":"7.0.0","@babel/runtime":"7.4.5","babel-core":"7.0.0-bridge.0","babel-jest":"24.8.0","babel-loader":"8.0.6","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"1.0.1","codecov":"3.5.0","commander":"2.20.0","enzyme":"3.10.0","enzyme-adapter-react-16":"1.14.0","express":"4.17.1","jest":"24.8.0","prettier":"1.17.1","react":"16.8.6","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.8.6","rollup":"1.13.1","rollup-plugin-babel":"4.3.2","rollup-plugin-babel-minify":"8.0.0","rollup-plugin-node-resolve":"5.0.1","semver":"6.1.1","serve-static":"1.14.1","uglifyjs-webpack-plugin":"2.1.3","webpack":"4.32.2","webpack-cli":"3.3.2"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"24bdd49f9a9038f6a888c1034b0c95d2331cff95","_id":"react-image@2.1.2","_nodeVersion":"12.3.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ySDTKF9z8XOn9NXM1IXGmevwAwj2PRy3HTAsHT+WCa80KnsxAPBQUrOq2/s4cB2wzfXnBiFQNDk5lHwgXYip8A==","shasum":"b1ac10c1e9dcfa02e5dc50ca841f1812d2ac3314","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.1.2.tgz","fileCount":12,"unpackedSize":50864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9sZFCRA9TVsSAnZWagAANiUP/i4IxKcKMr/TPExCnWV6\neARwU40lAw78tl8aAUjITCrmBYwq41hty02aPG3ZeFWpG28UCbKbzV1ibi88\nwP+3BjYtCTxor/qvPrVWWi/ZVw6+id6fb8UDE5iSS3lHu6w7AL6SbwTnZYM4\np/Ddw+GRVGOqfOuNK5gOL+T48TsZp35MhgGyB2rcxAipYNHWzPEdJ/jD+jpI\n+EHjCl9H2zqpfDfFs+/Hbl1irZz4Ypl0JINF7TyJeVlbbdeFuTmIpBFLmVW/\neIfhc7Fu9Gf0uf3omkmG5VMyzeaXhDLRqkB/py8X4OLh0QvgKokAplRkrqMU\nIuaSdHPgbqUoD1AJ5ywbEF3rPLp4ZGoHBOsD56fv4zf0hWcS11tNSvvI9PzZ\naBBh56XUl10n0vRDBhk2EVEJpB/3yQFXgQL/7LqZtVfA+auWY49+kD7F1CaD\ntMEYmpZZsd3twpYRVAL1331TgSJAWbuTWC3L1eazI6HA3vJCh7IaPyFFBQHp\nHI6wrfroCi9DlZIM65M5cuE1b4Wwt41GkGEapnpTKY1Xo3dNhxRbLo6tTVPs\naHd4Z4v6F2hoKLdVQT0cbwqy/RRdiplgM9k6v3idXyZoZGvgG2FKLLOpyY0j\nT8GkYQnUSqCvY9ngkVIYNJPf/6JXyFQgivoftU1+MaEPxA28gVcLVYF3ThmM\nkwjn\r\n=YEO2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDfmGu7moJfLoMbkuK2xSWe8G7bmFqzrM6WX+6bud5SQAiEA+SxKfizzJAkX883jFrMThKtV/i6BkhlWRzTdM1C8V/U="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.1.2_1559676484929_0.7634377839674968"},"_hasShrinkwrap":false},"2.1.3":{"name":"react-image","version":"2.1.3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && node ./webpack.site.js && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"node ./webpack.site.js --watch --server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.4.4","@babel/core":"7.4.5","@babel/plugin-proposal-class-properties":"7.4.4","@babel/plugin-proposal-object-rest-spread":"7.4.4","@babel/plugin-transform-runtime":"7.4.4","@babel/preset-env":"7.4.5","@babel/preset-react":"7.0.0","@babel/runtime":"7.4.5","babel-core":"7.0.0-bridge.0","babel-jest":"24.8.0","babel-loader":"8.0.6","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"1.0.1","codecov":"3.5.0","commander":"2.20.0","enzyme":"3.10.0","enzyme-adapter-react-16":"1.14.0","express":"4.17.1","jest":"24.8.0","prettier":"1.17.1","react":"16.8.6","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","react-dom":"16.8.6","rollup":"1.14.0","rollup-plugin-babel":"4.3.2","rollup-plugin-babel-minify":"8.0.0","rollup-plugin-node-resolve":"5.0.1","semver":"6.1.1","serve-static":"1.14.1","uglifyjs-webpack-plugin":"2.1.3","webpack":"4.33.0","webpack-cli":"3.3.2"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"a8a2274efc5266e47edc4729540d235097201853","_id":"react-image@2.1.3","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-IJKDBwUK6iOlZatK3oHeflrgrcmvKrFY4ATeucjZGsblE4oMOlHvWO9vYVRZiuUL0cWe5jKK/Ggvwkfe9BsUvA==","shasum":"59d7748a9dea87792b76f9f67ff0fe8d0782c89e","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.1.3.tgz","fileCount":12,"unpackedSize":50962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc951zCRA9TVsSAnZWagAAtg0P+wSlyYuPRlfhz6cdZZLa\nxXF62X0bHftgeczLOluTzdhRlVnhAlhMh3V1mQAzcX3GAQRSKDjWGtm95Cva\n5G1DHKJIpiVQWdtv1HSNnvSfCt2mhMmUpXb/SQi453/TbZ3UEUqk1IkHJRfU\nIJmEzYiu84+n68m6hq3YFuarWIFNWMHtbbkj56EElAglwLEh/JmDHW3bXtKo\nFvpu4H8EquNLZ8AcshYh96NL4juwUjaV9t/aq+eIO9g4XqjsaooMLTmCC+nx\nQdff/6WeXrTbksGzql16dU+Fi0IVNYWmEanNtTAufNyU4PCcBufdntMQAxQY\n4/9/HrjTgtzqGSxz9PKm9fYHKtV2O7ex5TDPAVw7QGKOwamO5pH4HVSul+gR\n9p9jvI5Pcivvl1Y+7OGDD3u3DfeYCJq7jLyOTE/YA2W/3Na84JgTfW92Rk0A\nHJIOXcpoJ4QvXiOpLl7kssMdXYWBiUp64F//b+ZJ0XQGjCr3FFLpjdaNQPtZ\n2G5xMLs8FqWw/os6s9LdncBsn47i8t+BLAEa/I9KPxuKvrqW7F06ly/vS8oH\nqQYrHvNLRmQ9auiTyNlF+imwOapZ+ODDIqw5yZi+IOQ5Ceaqu/oHH8+oNBFR\n++qa049zBOA3AjaqFQTg9gx0mPQC/lh7ZODZoUVoKrWEPoHCxwSIR+EroWvO\nWS1o\r\n=U5LQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBabNmG9aHHWZB22jiD8W4gc8RHvzPCBGVaF6cdhVCLEAiEAwwbn0LTPt7ws8fQ/7wC7I2znD1qkUzIT/FTWyS/lDRM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.1.3_1559731571241_0.3273484376947122"},"_hasShrinkwrap":false},"2.2.0":{"name":"react-image","version":"2.2.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && node ./webpack.site.js && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"node ./webpack.site.js --watch --server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.5.5","@babel/core":"7.5.5","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-object-rest-spread":"7.5.5","@babel/plugin-transform-runtime":"7.5.5","@babel/preset-env":"7.5.5","@babel/preset-react":"7.0.0","@babel/runtime":"7.5.5","babel-core":"7.0.0-bridge.0","babel-jest":"24.9.0","babel-loader":"8.0.6","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"1.0.1","codecov":"3.5.0","commander":"3.0.0","enzyme":"3.10.0","enzyme-adapter-react-16":"1.14.0","express":"4.17.1","jest":"24.9.0","prettier":"1.18.2","react":"16.9.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"3.0.3","rollup":"1.19.4","rollup-plugin-babel":"4.3.3","rollup-plugin-babel-minify":"9.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"6.3.0","react-dom":"16.9.0","serve-static":"1.14.1","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.39.2","webpack-cli":"3.3.7"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"6f408e5fd868574085b7c34bed98b2d4d340e973","_id":"react-image@2.2.0","_nodeVersion":"12.8.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-MXPNjcczXXN/2KRTV8tHV3D5fjc+QG7YIxULTQTWsN0o7anLae+igVUEYMjsP3jiuZxUoInVBvPy+p7woeOCSg==","shasum":"d0fa05b098b6d55ccb5917d89310c0dfdec2968b","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.2.0.tgz","fileCount":12,"unpackedSize":52167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWlSECRA9TVsSAnZWagAADggP+wWx2u2cIfkBn6Dk/L5V\nqabQZdciWMMSuqQHt6bCrcy9Uhp+JTv9QL5NF8w5Ab3Z9a3+Me5zPPFbB8XF\nw+CAuxqSYSGfmX+DtnCxCaxRwrz0YPtqwcVrReoqdDL9cqGkTXOtc/t/MhTt\nHYPm1iXeW5C07Z7Imx/Ioh8q2t1jk/w57SFZFejVi12foVz0Vx4s+Zcne4bO\ngR8EE01+9L+uR5QcH1CzWeImCFcGylYwJ5M7tX5vYNvAaisjn5rmRCAjy/OU\n9XQwahqnOkAuP4GPn2M9qkFt90O0LQhPZz4rMkd6XvXutx/cdY1A10/6j7x8\n7CyYDWMWVFLoTuNy9a+GiiNHzAeuzd6pI/y53ANTj6nMYKqKrZNnTaQwVTFA\ndkkXMEiK1rms9I8XQAJZj+Qk+PODHVDw8ewTHOs/+5gziLm+c/rdJ8e54/E5\novrC3iHI9HU0hgwU6omOqfPQXHhJ8og5b1NwoI3lGTvBoJ54IIxbQihazlSn\nofD+MzUxKpOEGGsTJYOjdEs7J/0d027t2FGL4YfzjWvFxyG6KWCFMD8CDMsQ\ninhlzXH/5BUyxL7SXeHJxEHOmJd662RtdfWP+QMxm5DiQyB91e7cfT+EP5Xv\nPRGgxdIOYGqIHH3N44ZYjJs694hntb3uybG8T37uG4x7HxtFViostnepKrmO\nbLMq\r\n=h/rt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4JJ1lz+pSwJxymTmzKg0dXbtVTbSvYR5PSwnuXPaX+wIhAP2MKQMNd+FUQQhVwaCR6EB9qvmW6WGc7YtIjlPbxHOg"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.2.0_1566200964304_0.46268353037896914"},"_hasShrinkwrap":false},"2.2.1":{"name":"react-image","version":"2.2.1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && node ./webpack.site.js && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"node ./webpack.site.js --watch --server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.6.4","@babel/core":"7.6.4","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-object-rest-spread":"7.6.2","@babel/plugin-transform-runtime":"7.6.2","@babel/preset-env":"7.6.3","@babel/preset-react":"7.6.3","@babel/runtime":"7.6.3","babel-core":"7.0.0-bridge.0","babel-jest":"24.9.0","babel-loader":"8.0.6","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"1.0.1","codecov":"3.6.1","commander":"3.0.2","enzyme":"3.10.0","enzyme-adapter-react-16":"1.15.1","express":"4.17.1","jest":"24.9.0","prettier":"1.18.2","react":"16.10.2","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","rollup":"1.23.1","rollup-plugin-babel":"4.3.3","rollup-plugin-babel-minify":"9.1.0","rollup-plugin-node-resolve":"5.2.0","semver":"6.3.0","react-dom":"16.10.2","serve-static":"1.14.1","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.41.1","webpack-cli":"3.3.9"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"eb5ca9f54cc1a036a34ac1459e58eda4bce71342","_id":"react-image@2.2.1","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-fUlwjOmEQU8JBe5jsTnFiLbZy0IyiYx6sOUVMlz9os2+rZexiOJoC0WV4vycvnEgFVxsSYnS8YIhEi+X/NqP8g==","shasum":"2aa7832be93023e918adae66b0d1b37d06eed293","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.2.1.tgz","fileCount":12,"unpackedSize":52300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdogPyCRA9TVsSAnZWagAACOsP/jyFihpm6tdiptUDDP6T\nhqyOo2EkEkhx1q9PoRwT8+hGY8j53s0eGfg48BYJ2KhaX7Rc3kXhgRifgIwb\n2qRnv0mlGcIHoLnF1dq8LJgabgbGCgMeS5PlElk0YqqJZrrWI6t+u6Q+qLZa\nw/ovy1gIMPElvml2bxmCZZ1CJojiIGk+PZuFN7pLM5bDbaguK9OjjGTpVece\n7ByZuEeAtL6sr2zFlVHHPZWRcC6KfsdvTewUmwdpSIOeWvVTN2yaL/yUoqT/\n6jiL+QAsvUo9eVP3Gj/6fCUrKRjeeXTCqfrOYo7bfrODZdUI3VHPsMAJ8YMr\n/eusxIbxmWlEUdAtAUR9VLiIgGT4Hc6DmB2UvG21PHt2a3I7fK1k8A40Lld6\nrN1aJpSp3XRkEYA21+AUNFESwverBPrd1IiesSSe1vaX7++Yp1CJljo50Mlh\nAfzleEz0ihbv4gS/O9L1JROPMGNRuTZKZQcFB1O3El7EVIh0ef3B/XEdP7GH\nPWVrz5t+j5yMWwjQY+/RmL+v7X4MDKI6uTPuJuJpAIxS/UtZ3ujBITyNEAnD\nd544PmgtoAU+FDDL7mapMgH3M5+vuG5STZkv66Jn3q9roLBvnbgVhr19XLAC\nbjkyN0dJv4A2/MsfzUHb2qJDRsT1l/1W2dM7LKMBlpNh3leuk2IPqU3ksfNR\nRm36\r\n=YdGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS6vb9Wx4mtUFaGW69PMMbLX/Ejzj/3W3qYX/OU02CegIhAPByL2GPW7u7bh1tcogYc+Ajm801mGM/KPoGTrNL4N/I"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.2.1_1570898930094_0.08431812998197574"},"_hasShrinkwrap":false},"2.2.2":{"name":"react-image","version":"2.2.2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && node ./webpack.site.js && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"node ./webpack.site.js --watch --server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.7.5","@babel/core":"7.7.5","@babel/plugin-proposal-class-properties":"7.7.4","@babel/plugin-proposal-object-rest-spread":"7.7.4","@babel/plugin-transform-runtime":"7.7.6","@babel/preset-env":"7.7.6","@babel/preset-react":"7.7.4","@babel/runtime":"7.7.6","babel-core":"7.0.0-bridge.0","babel-jest":"24.9.0","babel-loader":"8.0.6","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"1.0.1","codecov":"3.6.1","commander":"4.0.1","enzyme":"3.10.0","enzyme-adapter-react-16":"1.15.1","express":"4.17.1","jest":"24.9.0","prettier":"1.19.1","react":"16.12.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","rollup":"1.27.13","rollup-plugin-babel":"4.3.3","rollup-plugin-babel-minify":"9.1.1","rollup-plugin-node-resolve":"5.2.0","semver":"7.0.0","react-dom":"16.12.0","serve-static":"1.14.1","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.41.3","webpack-cli":"3.3.10"},"peerDependencies":{"react":"^15 || ^16","react-dom":"^15 || ^16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"037ee48c9558f2692c0587e69577b57a1f7b3013","_id":"react-image@2.2.2","_nodeVersion":"13.3.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-ZaVqZD9ZBGSpZwBftIbTVGyfYahqF7SjFpfT522SO6vJm+xoUCGK3z04aHV9rZUsaEU382auCM+wMyW5sh+lbg==","shasum":"603452970b7d86a23c56cd2cd1f4f6b797b902d8","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.2.2.tgz","fileCount":14,"unpackedSize":54027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd955SCRA9TVsSAnZWagAAUygP/0L1LDfMoJv7S4xa71qy\nGM+tIKeG03ZrdmBtQc8nVf0tJdMzFHWRPvMFn9xinJ6BTSXRfy+hL3Ujou2C\nyqlx0qslsJ/kljq+KMroUMHnZA1IwLtOkJdcHAC5HLADONp8bASJVlMbrB+g\ns492yAWqMyEb8gI9jbV1kA+TaUMcuIpxamY1rJObPTifHovamseYQ0Qi9Qdt\nCisFhb9Tz62/0xIwCB/z8SRHNxffilrZ7CuEYX26yl5XJptoDSuHErfngWz0\n+ClEwVITVqPnt7Ifvzau+lW8xVPid021J+3am98RPSjdGNOTJrhoF94VuGcw\nPXOHQ1c8MRoArjHCcWZgoH+BDyGz9uSOvOCW4eTJS8znbnW0mUvqV/8jGrd3\nKvIAcORIeMX9L6y+x1p9qxMdEgaVkT/04D/+ucPuu4DMNNjeByUPjMCY4Iwh\nEi+Lbs+LgiclAs3CjI/yKex9arG8otxwKkGhALvXlawjHGCBAKhWcRkhGMaH\nWQnmkkUQ0QM9D7aHlMKb3BK7J+Eli/ugzwoOcAiLKxxxA4WiR8AAzqdPJLeM\nIDeWG2BnwOcR6Gsc6SNgcru6OhFKiPQJaMYMNHgYpzlo63rvpeRGeiZtnx4a\nEB4SRiLl+cJsvJlkHaGW0VaNlGkVdn2H9/zGG2q4KL52zTu7U+wL99Y/6SJU\n+Lte\r\n=3V+3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAi84uUF6lKoejvNdemLM5oeUdJcWmTwpMQxhR/32sV/AiB4baOvyoZ8IvLg+I2VxbYP8rgfKdziAn3obAXX/ds+Hg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.2.2_1576509010575_0.4995236640647176"},"_hasShrinkwrap":false},"2.3.0":{"name":"react-image","version":"2.3.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.8.4","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.8.3","@babel/plugin-transform-runtime":"7.8.3","@babel/preset-env":"7.8.4","@babel/preset-react":"7.8.3","@babel/runtime":"7.8.4","babel-core":"7.0.0-bridge.0","babel-jest":"25.1.0","babel-loader":"8.0.6","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","codecov":"3.6.4","commander":"4.1.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"3.2.0","jest":"25.1.0","prettier":"1.19.1","react":"16.12.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.12.0","rollup":"1.31.0","rollup-plugin-babel":"4.3.3","rollup-plugin-babel-minify":"9.1.1","rollup-plugin-node-resolve":"5.2.0","semver":"7.1.2","serve-static":"1.14.1","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.41.5","webpack-cli":"3.3.10","webpack-dev-server":"3.10.3"},"peerDependencies":{"react":"15 || 16","react-dom":"15 || 16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"b27120dde3783141235de9601268b447194a14e0","_id":"react-image@2.3.0","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-Ia+aj32iheGuK2jy5xGahCD5/xUSrO9V3Ca1UdmpreNYpHx1KO0H/hPoerzR6iaJ+qTlv+lxDpEQceJduUY6zg==","shasum":"160abd648a39f1c5869c75e8c1c29115e27ef1f2","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.3.0.tgz","fileCount":14,"unpackedSize":54101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOub4CRA9TVsSAnZWagAAyx8P/Rea2V0z39FaoJLL4Hj1\nR1n2Mhqh11iHlIqvG+iUCw4d5QrcF7pHjE/SFXwm+RTLQLbZ3qmNpqj5zrhl\nvNbVnOVB+8xf85GVADTv+Bhsfws8PLun2CTarpYsl3oRs5cnD9ahCpGijf/c\no6g3ierHXoq1OY7cII5KtKfzr090b/DfkIQQ/JPsW2QaySDiCG3+mh2ym6/q\nVtgAcPK+VsYSwj1txoXZ4dtlkKl293vrxdU6WAhrxUN5DCyCkAbOYmOfOaQU\nvuY6ifUKqUYPh5KPz8/UrOPzI2ByazCtZ/mwjVy4aB5WS+hD4bkX1NH4wXKL\nK9R3X9tpHlFMV39Cs+E9DGmegVn6bg46sn0tO9aETLwteI5/MTLuMokD1dQm\n/oGR8mA6EiqB2rSHV7mC0gBTCdTb/EsNCFU9UsqDALIER3hce+kbHX3FkiYm\ngLRFmjMTviygEunKInPzgk5N8/WZD401bBf41Un9ODjm8q/YTyUCFWHgg84d\nPISPiGO5HyUM2BpK/dTRbbfeJU0ES320NMDO2mIYDjemZnP/T6Opw/e72QPL\nflCzrAAmrvBHE5Nh/YK4Rq5taC69sW0E1gWMHQ81DT8jOMxBttRHjtInRqqK\nwARzthUOo0kWfCYDUDvWi8aHQC7WM86RYPZEIDD6QbhTkD5qKmkyWrQuuF3I\nf4Sb\r\n=BfGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxNLTPPqN5VG4OGvELnUlexSPc8eWu/2SEmTgZtTLFWwIgDJsP7XfpNvfZ1JO1qU2/cq/M8xBrZXfV0NRWKmQSr58="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.3.0_1580918520204_0.7999712553862592"},"_hasShrinkwrap":false},"2.4.0":{"name":"react-image","version":"2.4.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","shouldPublish":"semver `npm -s view $npm_package_name version` --range \"<$npm_package_version\"","test":"jest --projects jest*.json"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.8.4","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.8.3","@babel/plugin-transform-runtime":"7.8.3","@babel/preset-env":"7.8.4","@babel/preset-react":"7.8.3","@babel/runtime":"7.8.4","babel-core":"7.0.0-bridge.0","babel-jest":"25.1.0","babel-loader":"8.0.6","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","codecov":"3.6.5","commander":"4.1.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"3.2.0","jest":"25.1.0","prettier":"1.19.1","react":"16.12.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.12.0","rollup":"1.31.0","rollup-plugin-babel":"4.3.3","rollup-plugin-babel-minify":"9.1.1","rollup-plugin-node-resolve":"5.2.0","semver":"7.1.2","serve-static":"1.14.1","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.41.6","webpack-cli":"3.3.10","webpack-dev-server":"3.10.3"},"peerDependencies":{"react":"15 || 16","react-dom":"15 || 16"},"dependencies":{"prop-types":"15.7.2"},"gitHead":"9ddad258bbf9b34476efb3b2257bc3d63de44c34","_id":"react-image@2.4.0","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-gYO0JUn4spmqFIac3BXG7vyXLL+PJAOOWw7O88StzEAC+fMSiTIOa5AVaIfBkUqTM3tZc0MO7/26jsRdUKioDg==","shasum":"ef67a32e131c3570cc1eef106c470811bbfa094e","tarball":"https://registry.npmjs.org/react-image/-/react-image-2.4.0.tgz","fileCount":14,"unpackedSize":54193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQtinCRA9TVsSAnZWagAADQEP/R3v3ICcQLK6VZOa9BNj\n5cxCgCSIGUe5RMa2Oq5RAv+YmyYcKuDDvQ6N2Za5+P5aAvbqj7vonfQfNBOR\n4949ruj2s3LDzfYCEs7/Xo5ObbC5kxEfYu7P/2s5Wo1x7nEZF1Lp3HI+nJzl\nECsalElVtqoF3ulFy26g5B6e+XQMdJa1dVJv4aChCBgBaucdcIRQjMEQPk+k\nxbzO9QQH1OJHQLLdQJk7MhH4bg4tFqRRAGWFGHtyr1XxqqvSYiwv7OSv88YE\n5vOuxw+kE8vgPF8UchLU7tnPCJrk2G37gWJK3waGet8Htr1m+A7rGVFg3KfC\nRFRZ3ncx6hOPvOfQmsb20oICI/hJ0Clg4zGjK5OtG9XdTZoLvUjWxqDqwiD5\nvc7eOtWexppWJZEdwbzXmAwOIe01U+88G1bL4vbTXxdKtKWmAIOAmL+kqVE/\ndgaeT3wI8aHWSku8dErtp777pjmsBOoaXYLRqrupc0q7KfZPZa+gig9GnpNg\nIOug061aw0dwFJnzW6ZRwJSaEMmMOjICGFXaertgZQTla/ifwb3JZgpPXfJN\n+HH66WPZ9Ss8p49L4EvyEExr6vbyu5lpD1Mm0nDfNs0elgNRDFW3+d4nh+nR\nx8NAo/IyRBi6Cs76GjrDKpxgaGvHWlzxN8f9ZkTEE8AtMz6kzsBza2YxEesY\nH1uz\r\n=IPzx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHbSnrDskuOfnZ5xEOAtK8m2yiVvlmdTwMa4rXDBUxCwIhAJrWGdfqZhXLa6YZo1v3bJ17JwnvkwVjkfUwOgJHVfJZ"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_2.4.0_1581439142451_0.1787351287821899"},"_hasShrinkwrap":false},"3.0.0":{"name":"react-image","version":"3.0.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && npm run build:types","build:types":"npx tsc --declarationDir . --emitDeclarationOnly --declaration","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"^7.9.0","@babel/runtime":"7.9.6","@rollup/plugin-typescript":"^4.1.1","@testing-library/react":"^10.0.2","@types/jest":"^25.2.1","@types/react":"^16.9.34","@types/react-dom":"^16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"^25.5.0","ts-loader":"^7.0.4","typescript":"^3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"gitHead":"aa0bd7d98f4e7498f6d8e50474f7c0e926a905ce","_id":"react-image@3.0.0","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-YD4QeyNtNRcNH7ve40es2KK91I2Iy9ybjxkhirwN8rF07tHGPXHBDsx6YD61FTzbu3syg5cUi6XOUGMnZlz/KQ==","shasum":"d122ad6b2678cb979dc34a36cf145ebcbde48b28","tarball":"https://registry.npmjs.org/react-image/-/react-image-3.0.0.tgz","fileCount":12,"unpackedSize":27187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu+goCRA9TVsSAnZWagAAoHkP/ijOFO+JxYV4omNbMuoD\nwAW6lIIPNThdebiKTHtBZm1/+Bva5mtnx7leE95nq2xI22Ts6F4KVskCO2Wi\nBFfroSxxmgnbwgYehMX9ZQpggWMs3fGWBlzIkx72XbSjyrIgVQGdxOmkbsDR\ndX2rXwBZhKOrnY1d6O17D3zf/cuFzOm5DIT9ezPk840wnunyq8Iid1ukmy6q\nReEc5Z5zpUOpAtglocmkZDfD6bPiOOKS8jHEt6C9Ao+wqgdsYdEk5nBccOz+\ng3SQ4m8Jls3/Q6/QU0fQqQ57s38HBE31X1Na4PiYIur2auqMgrwr6lawBl6e\nqBMksDtJSfu5V1KmO2P3YljooUoS47K2I5Yz0A/Mz5T72ycJo8D0j6pccujD\n8NWMYS7alzKJCUEx5g7IFddz2dFeSm+nfcmQE2iKtLMDYn/2Mf8LXvrhm5Wb\nBExwGmUtQABaqbk9axYvTT/VwxqXDeY6Ul/7uDR/Bh0rtEuHJqfdu2wXEex8\naV6o571sQO7+2Jqmt4S334nUlB1+tCkcyZ5FcPi57yGzMJ2vzGvf59rUmbJ4\n9HWK2dsDIEDA1A1la10oDj1Y5wdkxelA6bv0JxhnahCn1/CKOnn4Xb2zzC+I\n4d3ndDZ/vGWVF4f01bQcT8vYHjXW2/ImGUaU6jOP1upUsHbUdjmFFtqcfZIg\n8OI2\r\n=+8dH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICXWuSdeu8aC/ekM1No+vSNQiC7lLXfm5K5/w88zGWgtAiEA11i8apxed111RD0jtgrYIfoNtfE5QkXPRJY0yISG0H8="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_3.0.0_1589372968408_0.6690055139298314"},"_hasShrinkwrap":false},"3.0.1":{"name":"react-image","version":"3.0.1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && npm run build:types","build:types":"npx tsc --declarationDir . --emitDeclarationOnly --declaration","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"^7.9.0","@babel/runtime":"7.9.6","@rollup/plugin-typescript":"^4.1.1","@testing-library/react":"^10.0.2","@types/jest":"^25.2.1","@types/react":"^16.9.34","@types/react-dom":"^16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"^25.5.0","ts-loader":"^7.0.4","typescript":"^3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"gitHead":"e2847e64ff7ae15f8512f88da14ba854ea63f4d6","_id":"react-image@3.0.1","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ZoQfTQDEyH0DaSVYzHRnaBSjR1mflrRdjnKl+h6YqpyHLK/Lzovc7NQ+RPhBj2v7jItIQCV1R8DGeNf/wcQfPQ==","shasum":"5cb8c553d4beeed025060094dcceaf6f233c5046","tarball":"https://registry.npmjs.org/react-image/-/react-image-3.0.1.tgz","fileCount":13,"unpackedSize":30566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu+prCRA9TVsSAnZWagAAp3QP/1leTjKFyJytIcCDFS3x\nkfhm8N7WeptsQUQtkeX7vb51IWxu11nOetLrNHrRtnGAKG0ayr6vUoAMWz0W\nPFEIejHWwAiBMrsNoMFX//Ex6UUqQjP9PyeHc17FN5mcYUHJrFlV+/UB/1iY\nBekW0l+lpV7oAPjMC7QxVJHKz2vvg9OoLnAolKCAynLWkzVFzMn1im0Iyo8R\n+GsLki8Ia5eiNmNReePvj9TMeHF/trXGatNgjkZmWChPFhqP3QvXq492WgUb\n2CUmElTBWrJR0fI3d92pPDMpKyAsCHhhCzA2Ijnha52NqHf7QIz6Vau3q14G\nhnN5PGE0A+3c8mxlkmvgoDBgmKxEeqkGT3BbAtkAjh4O36Ght2nHg3lQVMoG\nV3xl35vvk8Bny1yxm1n2q0JX4MHEl9eMoUeW7jYGx0nbGLMxllzVai8IsoON\nB1GAfh7xE+K525KT2CZdQgA++TF1btivZHQe/nJ+BltDVAQmjhrrWi2hO9Np\noFz9EaMcgZGesWZQtDbBzU8MFG0pXE3q1F7AUdKMMRA4h5jkkdA2xjaB5Ty7\n6UyQcuY3FVIpM3tSIYvFxjqJQ0L1kylI9iH2k7ApkV4A09EC0a82HaoPqZWU\nvn/+rYiZoxpqafjhaAZd9LATtSYPSbRmrIMTmSfQrP3tBQz4kNSxpvIJSb1d\n4Qzv\r\n=1OrF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHI1sZTE8OSbj00S/rlO9PkF2G4qfWxuqe+dkL6DXhpXAiEAiao3eBV9ukMfeydmphQS+PKpAF7M8j+ZF0BvxVnBbIE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_3.0.1_1589373547399_0.8158155349126412"},"_hasShrinkwrap":false},"3.0.2":{"name":"react-image","version":"3.0.2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && npm run build:types","build:types":"npx tsc --declarationDir . --emitDeclarationOnly --declaration","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"^7.9.0","@babel/runtime":"7.9.6","@rollup/plugin-typescript":"^4.1.1","@testing-library/react":"^10.0.2","@types/jest":"^25.2.1","@types/react":"^16.9.34","@types/react-dom":"^16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"^25.5.0","ts-loader":"^7.0.4","typescript":"^3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"gitHead":"824a012ebac21e61666463c624c1e5c99d1e9d09","_id":"react-image@3.0.2","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-KExlbRk8iFLt2Yaqr5B307p92JnSX7BKc5/H+9bSySOwVx+uD7xneLDnOhX1IMnc+Xy0FEJGLokMJy7Ay5QvMg==","shasum":"688d00031293c3221b418a07e799672fe193c821","tarball":"https://registry.npmjs.org/react-image/-/react-image-3.0.2.tgz","fileCount":15,"unpackedSize":45983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu/ANCRA9TVsSAnZWagAAUWwQAJCdJN9lOAGpkw7b25it\n4n+LxFRtBWf594KbJrVs8uvVQ6WyybLxczh2cAeG02rCKRQHrx8He/ZKIRWw\n9LrRN44YMqeKJYUkbyMgssim9nl+9VwyIAjwSeO+uAgc4zaXBkd/bfCp1rOm\nvfS532RYYrgI5F/vPgdeoyv5zHCfXqPcXi1SJTNYOBrDkT1aZyBBFrkSQNzh\n6yGqPrcAfdzRlTv1LgIJBx3WTp+86CQqPeYvuNOVU/a2L6DnZ2AT3MeAGE6V\nsLNQ9TU/w6Qfd5uj7vAXV4XgbCPKYbHXpikkN0M9lq1fcIdlJaCZwoiFDsDo\ncMBMCoQIHxrRObyseuWYG0rXa+ySQZHDlKql0od/rmCSJS3m7duyNg00rDkH\ndfNUiib0xTiWk29hgT5Enf87HjUCXIrZCyFQXTnPHUsgM0rPXcgh5rsHV3VE\ndM42DnBY07L6QNsM1a1x8OgPntiHLGqam+Niwg0APJwu5GZTgZWT0f63rPso\nOXUqV/cHvpdzAIufgCj2wYnzoyqt2MpogXFY3/ly2nJEax4e2N5xeorlCZrX\ngqXpxTI9yYb5g+jW4uHO+0y6I8rxSatmIYL9grwqqDViKYkGeB7StVt3ztUi\n8KcZ6sOucAQaZvu/1P46MsOgWZDMFYp7T7Px0Fq3ayJnhER5KwH71z+PTGL4\nURqj\r\n=nyaA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCuDw6UFt42qzrHEDf2hzGavR0Nn4qGVQV8lPreCho0AIhAKssL0OCmsHPIkuVu6j546eMO5lQtqBB4Yf7gOL4/EvA"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_3.0.2_1589374989113_0.6778147533520036"},"_hasShrinkwrap":false},"3.0.3":{"name":"react-image","version":"3.0.3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && npm run build:types","build:types":"npx tsc --declarationDir . --emitDeclarationOnly --declaration","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"^7.9.0","@babel/runtime":"7.9.6","@rollup/plugin-typescript":"^4.1.1","@testing-library/react":"^10.0.2","@types/jest":"^25.2.1","@types/react":"^16.9.34","@types/react-dom":"^16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","babel-plugin-transform-react-remove-prop-types":"0.4.24","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"^25.5.0","ts-loader":"^7.0.4","typescript":"^3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"gitHead":"9176ef6cbafa8d1f01611211eff1a1840cd583c3","_id":"react-image@3.0.3","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-C6DUCkmrVw3A4Nxz8nA5RYQIJ1V/4XtJYIeUR7f0XoWl3cN6jTYqSQa3/zCJ2PZ4Dk+mgNWQnNZGP30xpmPiYQ==","shasum":"a51268317af77a9a358fa1d0ec9565c98b56aab5","tarball":"https://registry.npmjs.org/react-image/-/react-image-3.0.3.tgz","fileCount":16,"unpackedSize":48406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu/E9CRA9TVsSAnZWagAA2ZAP/jkU4ugUnMtHolVWy4gm\n4L/tso8qCgcqZWN8hMpufzy0rZANG0Fm3SXH8Ik9HVh77nDD+IlobipALDvD\nI+oOcEVBFA71kc5EXAKnKIgPsuRkUcR5R9vMVdA+Z+ncgXHX5GnI/a86L1yW\nKUP1uc3ueXjKfJ09hcz4kSkT1W0EZrEiibdAN2yysiFzbJZCpTmo0F65QNCK\ni4PtoscBrQgOszQ16WtRIHoIvtMGRoaL8PLSKbv/P44ZNAU41CHdgalf+dHP\nswVwZyMTnN3jt880/dc+gPHSFz0YfHTalnHdyu/WQCrCWKa/mKy2wwP56VHs\nztJ3Zp/Zll6hmSYy+GxQA7qP7S3k9oc8URomvwB4F0S6sG7PEU3zFZ5Brc2j\n1yOvbjkDf1J7m+Ht8y10hPEphkVvjINpS6R2k5hK00Dw1xJ4usTAtO8Jbf8N\n7VFXHqaSqMLXFXRl7N228mBHPOmrhh5NI4h1QUFY0qn988xzYloChQVdEQLR\no6QlSBQy/D3YuINmdP9f8G7S9scnTc0Iv9iGRlfOwMdcPKWH3OfvxZ7jFqnn\nm96hmem9/xe2z3Pa32ovvr00lAtZ/TvviRa0j4Xu0AewFZgNoU/MVaQNRV29\nfFBR8SWzFk08UtFGcqZa1/CreNbfpRg9B9yXaIVETgvlsIDET7Gbc93M1daP\nevBa\r\n=Egek\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArWcr1m7+vG323EbXB8PtjKOngjzHuBPG3vKOTU/7MWAiA15pVxf8j2vEOS/F5JQl3SlHQ+MnCLqNSL/ndfnlHNJg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_3.0.3_1589375292549_0.6924909220650459"},"_hasShrinkwrap":false},"0.0.0-c43b70e7007d310b9474f695d88d81c03377ee68":{"name":"react-image","version":"0.0.0-c43b70e7007d310b9474f695d88d81c03377ee68","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.2","@types/jest":"25.2.1","@types/react":"16.9.34","@types/react-dom":"16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) and in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook the throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport {useImage} from 'react-image/useImage'\n\nexport default function MyComponent() {\n  const {src, isLoading, error} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. This can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is always false when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and support Suspense.\n\nInclude `react-image` in your component:\n\n```js\n// using an ES6 transpiler, like babel\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time this page was loaded), the loader will not be shown and the image will be rendered directly instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images as soon as the `<Img>` element is rendered in the DOM. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead use the HTML `<img>` element and the `loading=\"lazy\"` property. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## Browser Support\n\n`react-image` does not include an `Object.assign` polyfill, that may be needed [depending on your targeted browsers](http://kangax.github.io/compat-table/es6/#test-Object_static_methods_Object.assign). You can add it in one of the following ways:\n\n1. include it in your package: `https://www.npmjs.com/package/es6-object-assign`\n\n2. Use Mozilla's polyfill: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill\n\n3. Include the following code before including `react-image`:\n\n```js\nObject.assign =\n  Object.assign ||\n  function (r) {\n    for (var t = 1; t < arguments.length; t++) {\n      var n = arguments[t]\n      for (var a in n)\n        Object.prototype.hasOwnProperty.call(n, a) && (r[a] = n[a])\n    }\n    return r\n  }\n```\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c43b70e7007d310b9474f695d88d81c03377ee68","_id":"react-image@0.0.0-c43b70e7007d310b9474f695d88d81c03377ee68","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-CQyFdUTtX3Qh6m8a+K7w9bkh8PaSue6SmxOM+5+tBSyPBT88YpMP4F2Gke1nBdR0ma0QFSju6/Ko6ltumRf2VA==","shasum":"4e7d57626d34c441cbd81edd4a70e734acf12f55","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c43b70e7007d310b9474f695d88d81c03377ee68.tgz","fileCount":6,"unpackedSize":18670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevUdyCRA9TVsSAnZWagAA3m4P/AgzExKYyNh1PIL4xFOH\nC8UdO9fw3W9GoeJaQnnLuHX2l+tGW3grfuSeFIWBmG1w0Bs+cF2587T28Dwt\n6hNqI6iYJvZleQMP2Fn4WCuOSR/Z7c+iUwN1glfIJv91o2bGUX4IBy5FD3UD\n+nvsImFmPcCEifXSayX5uShwodBFb5L9MhKOMsVrG+72CTDdQhM0mTf3Onwf\nTT6OthWrZK9d6VJqdhJTkFdaRn8aybZqbFwwQ5yqrBjD4HXa4kTJ/ZLlbf/f\n/zYRjy6wxg6DEZIKgnHtg5P/xIC8u1WkEkVWHhtSjMQnrK0B0kfLcqQAgoWb\nuG+E6xOiHucvkWuVZOawBKqRUdx+W4GtHNSc2mi5C1wtFvEYLx+cobFG0Iqw\nKs0WRemMp0+xj0KFTyKwxGTJ/lDcndrCTrBy++CmeHEil9bxXmu0fKmfAY5f\nJJ1Vq5TnUAbk7ShwDkrzlTJ5OWtIAuttfIZjfq/2i3QtqyRG5hSKbmRy5HYD\ntcDREOErS1J5nV0TAZisDnlSOER0kYqwmLe8ZVFxuD/MdObazFKhlNGVPcBE\nys2GYIvcfRVhVpYqVvIixy7m+AIZE8W5UcwIiNe+gKhigPpSTdGeGftabZad\nNTZ3reef/AWv8tJqx5VQrU+G1teLDqqVn0sO/pDV6JP3VavWWNr1fLALL3ti\nnbL/\r\n=dhod\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfp6Q0N9OaaVOzXGMFtVrhKCCd56atyxRayeJBmxsaRAiEA2o9wqvMwuN9GM7BdqxHOHXepa5VilI3fifsXOTPu4bo="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c43b70e7007d310b9474f695d88d81c03377ee68_1589462898217_0.7218737962932484"},"_hasShrinkwrap":false},"0.0.0-f337c09b61ae15806066eec143400f8bbde9ac7b":{"name":"react-image","version":"0.0.0-f337c09b61ae15806066eec143400f8bbde9ac7b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.2","@types/jest":"25.2.1","@types/react":"16.9.34","@types/react-dom":"16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) and in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook the throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport {useImage} from 'react-image/useImage'\n\nexport default function MyComponent() {\n  const {src, isLoading, error} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. This can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is always false when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and support Suspense.\n\nInclude `react-image` in your component:\n\n```js\n// using an ES6 transpiler, like babel\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time this page was loaded), the loader will not be shown and the image will be rendered directly instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images as soon as the `<Img>` element is rendered in the DOM. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead use the HTML `<img>` element and the `loading=\"lazy\"` property. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## Browser Support\n\n`react-image` does not include an `Object.assign` polyfill, that may be needed [depending on your targeted browsers](http://kangax.github.io/compat-table/es6/#test-Object_static_methods_Object.assign). You can add it in one of the following ways:\n\n1. include it in your package: `https://www.npmjs.com/package/es6-object-assign`\n\n2. Use Mozilla's polyfill: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill\n\n3. Include the following code before including `react-image`:\n\n```js\nObject.assign =\n  Object.assign ||\n  function (r) {\n    for (var t = 1; t < arguments.length; t++) {\n      var n = arguments[t]\n      for (var a in n)\n        Object.prototype.hasOwnProperty.call(n, a) && (r[a] = n[a])\n    }\n    return r\n  }\n```\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f337c09b61ae15806066eec143400f8bbde9ac7b","_id":"react-image@0.0.0-f337c09b61ae15806066eec143400f8bbde9ac7b","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3wlGFBwaS6yz9nd7mI+TPHVune7dmlR2Hdlda291hXWR9J/vwX/BZpTr57h/SbH2ood9mcoRTCMZzY3sI8GPQQ==","shasum":"99934621ddfd2bb453a3c059d175a2faef5baa2d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f337c09b61ae15806066eec143400f8bbde9ac7b.tgz","fileCount":13,"unpackedSize":36688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevUlQCRA9TVsSAnZWagAA1ZEP/iEYcBm3aZZodrQoJTSX\nLf8Kjj1rpphgUQfyX4jhtAc7t8FzF+O7M/ddb2C+P2qdKpuW1vnYu/mjsy6R\n2i0/wqRLLFkSx5ENI3zDEDeJWOILHb51+FkkhEzlmu62x2S2VgSh3sVVkMSp\nHFx3h1yWcTe3bD0VJyKIgvWwvktvCsiS476UKg/sax5H4RS98k1cuNUj32b4\nTPaEl678kuoRJX84sIDnAWEChyAOmkKVPug3DseQ/fiE0YqxIIyMwsbxUKuw\nxdiCipCKErypzwlUrJP+q0A4nZrsa6EeOfcoC7cc4Ru643cOSAqPuji23Cid\nL9DzTrn+1yaizbNQgyeFz2SLbejfLkJbK4zC4qNCPk2NXyN/V9BUNUm/jXmx\nlawFmkzsHakVSqk8MQ0hkazkv80a7q/MHntjuBIzp7gfBxa+wy8yyR2i8L2p\nyBdsPLx7YoirqO0JtwF5YwoQzd1tnDi+P2HuCiCYDY3/eifY3tYkUzW+Dw0D\nn+Zyw/I3I4FsblcA6R89J9C83YHNDns+X7UPsPWYuJr1ZNzAeuQkVsp//bJV\nOR9I19i+Yky2x9xcKU2k2+Cbs6r01IeCSBev6yGCucEppTeeRhPbZNs3poz8\nUlGQ0ssZMRQMAweNIt2Kv23ZNiVllC0TyxUCkm8fWhhHoxYC0hYgqQ9kvIeK\n/gC0\r\n=7eew\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcovZ3n5nzXVzbUooy6Ze9kR1+EGKVDPonW+dBmqh1ZQIhANeZFs3ANcwYwmygFNw8pyjxtptj/RZ0b22EWG7uq78D"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f337c09b61ae15806066eec143400f8bbde9ac7b_1589463375446_0.12979702686500771"},"_hasShrinkwrap":false},"0.0.0-f041bc82bdb574978decadac3cce8cf85539edd4":{"name":"react-image","version":"0.0.0-f041bc82bdb574978decadac3cce8cf85539edd4","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.2","@types/jest":"25.2.1","@types/react":"16.9.34","@types/react-dom":"16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) and in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook the throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport {useImage} from 'react-image/useImage'\n\nexport default function MyComponent() {\n  const {src, isLoading, error} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. This can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is always false when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and support Suspense.\n\nInclude `react-image` in your component:\n\n```js\n// using an ES6 transpiler, like babel\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time this page was loaded), the loader will not be shown and the image will be rendered directly instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images as soon as the `<Img>` element is rendered in the DOM. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead use the HTML `<img>` element and the `loading=\"lazy\"` property. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## Browser Support\n\n`react-image` does not include an `Object.assign` polyfill, that may be needed [depending on your targeted browsers](http://kangax.github.io/compat-table/es6/#test-Object_static_methods_Object.assign). You can add it in one of the following ways:\n\n1. include it in your package: `https://www.npmjs.com/package/es6-object-assign`\n\n2. Use Mozilla's polyfill: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill\n\n3. Include the following code before including `react-image`:\n\n```js\nObject.assign =\n  Object.assign ||\n  function (r) {\n    for (var t = 1; t < arguments.length; t++) {\n      var n = arguments[t]\n      for (var a in n)\n        Object.prototype.hasOwnProperty.call(n, a) && (r[a] = n[a])\n    }\n    return r\n  }\n```\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f041bc82bdb574978decadac3cce8cf85539edd4","_id":"react-image@0.0.0-f041bc82bdb574978decadac3cce8cf85539edd4","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qEmCtD8uGitk/qTg85DGQrPtG+6EwcX0RI5vmeoDubIT6m3ewCmOMfu4NfF2/koHZ2IomPXT/FYS6wBpDTAMbA==","shasum":"f4f89530ffe50566ad115fb9e29f818111de53fa","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f041bc82bdb574978decadac3cce8cf85539edd4.tgz","fileCount":13,"unpackedSize":36688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevZcxCRA9TVsSAnZWagAAlpcQAIJQp0HMjuqgmhItEh5u\nOJZEDHbgj51Nb7gWzL89zMn0F4aztlbZIxswUVc9Dwv8EtW+5qupLR1RsjZS\ndudXgxn7Hql50qdCNEOQVpNFHOH3wlGxuASyoeh6UWF8hOaSqj4ttxv0Pcdz\n8EQXhPysFLNjmsaxShxTssVwFSvQoinjBW1trxeCyQHhfN+o4hv3PXkOAwYI\nKqhL1XAgnBB7lhbav8taF6DBx0qgsRp+yJ7E4YMYvq+2PBB+hGmLAdsMeXA/\nAcYAQnv0KtcI4L+ehFsuD1VFS5VuynU3axbQyl5AJxAAdzv4CBGvklQHdeNU\nPTx+Bz89GqVqB5EvVDA4vlbPT23EUJZ8eH/zaX2c5fqtKIKsAyIV+C0ncqay\nLn9VJnALYtFrAp3TQAUpgiykExQPoAevkD6/f6CAqIHxdniwUCJUflPlXCm4\n2PME5tzhSIso6hw0soUlSMHl1s+Jx67M2IytMwx2iuQxt/Rw7gx9DDTDpUYT\nOyy9sGY3B74FG7qWehbrWREtl4l1G9A7HsBvl4+e90zqYileTReRd6gb0fuY\nRsZzmTkqtvZ42LG5f15YImkGkNUJW0hEgkzv99rq9Itmff4McpMo8rC3sfLr\nvKT3YLtUX9kSVnQywzQisJp12SLJ20/WqwbSrcBFR/0smUiDIY6bh16IJRtR\nmfWa\r\n=+eZj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY14VWJq3CJixLDZkAnwKzf/ubav8C3H9dwi+pvQJ7TQIgPC3ERToVNRWd+xwvSlnH5UXs4hKM1ao4ODTCuEmwz78="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f041bc82bdb574978decadac3cce8cf85539edd4_1589483312997_0.4829555892252093"},"_hasShrinkwrap":false},"0.0.0-3439b42e040cc9fcdf755d3c9f66efe5d38435b1":{"name":"react-image","version":"0.0.0-3439b42e040cc9fcdf755d3c9f66efe5d38435b1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.2","@types/jest":"25.2.1","@types/react":"16.9.34","@types/react-dom":"16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3439b42e040cc9fcdf755d3c9f66efe5d38435b1","_id":"react-image@0.0.0-3439b42e040cc9fcdf755d3c9f66efe5d38435b1","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-GO4Ykr1uLRlWY//5jkd+q12B+FA/zS2bTZ9xMWfRtbEsD8sDJyh6GRXjXMXw+nS5vICuWxiVOx3cVAYmHkS+7Q==","shasum":"f65e60ed2def0a26c6c873d5f9d76813ec47675c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3439b42e040cc9fcdf755d3c9f66efe5d38435b1.tgz","fileCount":13,"unpackedSize":35989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevikZCRA9TVsSAnZWagAAgcsP/2Lw8LfrneCKlnUk7qoD\n8cCjOMPOjBdbzLjlNoym/EDup5ZnN/XSqHuoe3wIZe5pf6W+Nem0QwvpgSrF\nsmwL+cKN/t90JCsg7civZf6vwM02RLH3tjfiI+qfRRGLlraBe5oZJhnBfJoM\nxmfDl5lvXSVa+ttampC48XpqVCcimICw/1m3axYnxlONszOWC/TAFqJyp6RE\nQ93mFdYxf7WDqIxmfwQ/OEFntGLEJ7gl5AIw9FoTntWcqyA/94+US3K13Qq6\nGzCjDkPDRCPakpkP/N2GrtvI1OFqd72gkoyjDWrLWfjHHGRRSZAWP3F6igoR\n5f+dl07cRsQCwRvSVFOWIVmexeUJjvylgaEEWcGl0s3mknI+fFGMAystmoyZ\nCmqeNM7CA8z7+8uDeiwZAIkSVIiW8WUYy8SHuUS3WuOqeBZb6KCUst415Vfh\npz6j7ReEvg2gYztusct9PL5SVYjbxH6hIHBNMKPbxbj/sz5Ob0+pW7d3yzOf\nHcmet88WFKX2n7omOfYrko3DwAPjMGercMfXq401+VysVL//odkfmyHGvIZx\nlPZlpHNlZitznJwfkyCydtZO+nHVPmSlCeu7+SVxx8Kw8iLeoP9SlUt49o95\n/0Rklz0LJtJubLGbbBoQ03zcIUZWdWrxzF57p/rUnu2SW6v5zL6D/XpQIGoA\n59b2\r\n=XUmF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUBmFpWRvnalQizTGYKyu4JvHt11MmWGJHYFJ2PuNOvAiB9h84jSoP/1wMOwdmBIa1stXOkHeKR/pAHbkDcI2gVlA=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3439b42e040cc9fcdf755d3c9f66efe5d38435b1_1589520664671_0.30676637806703977"},"_hasShrinkwrap":false},"0.0.0-c6693a0968810b05ef63a1803ab3fab2f8beeb92":{"name":"react-image","version":"0.0.0-c6693a0968810b05ef63a1803ab3fab2f8beeb92","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.1","@types/react":"16.9.34","@types/react-dom":"16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c6693a0968810b05ef63a1803ab3fab2f8beeb92","_id":"react-image@0.0.0-c6693a0968810b05ef63a1803ab3fab2f8beeb92","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-GNPbNhA5H7yJzlrYukgao/5QA6Tmqxvk/QbE2byz9wEgUyHZW1JThpEEcEpYxJnR5GQOObdhj8M/ckS+4pcTLw==","shasum":"dbbc9e3c5e171ecd745bbc5bb076eadaa1af9727","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c6693a0968810b05ef63a1803ab3fab2f8beeb92.tgz","fileCount":13,"unpackedSize":35989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJev6OECRA9TVsSAnZWagAALBoQAIr2+GgHuPBiBSBTb62S\n/pURnKydO7AayGlFsUxOSPGNHmw8tRI7FVSOYHOAkJG4GVyKrBI4XTP2Drhx\nDLeDpKS2Y/YhJv048TkFFaAvYSaY3yqM+qpcMXAsmFFMFS8pCqCDNdka933K\noyF9YIAepCTrYaJ1ODYKyXQfjcesUvo4yZzs6JJ3s8fkSCVk2Tq36PbnUG4X\ndmxZ33/pafeVt0OAkKzBFKkwU66aUqGCP/5Z9OubFSmcNUzqXyddgCVlvj8A\no+kub7rIagKofhPvAK0GM3XpzE2NiXO745A6rzdMnI7ZTto+tfJBNO7SRyvs\nh6g0RJAGetb/8Uyr8nZn2S2R1/lYlldXR/tMTSSDL18DLY52EBqj2CYwU67y\nozWZSllEuOdzdkRntOS5EEnglqAz0BuYdsoXm++xQ6GvOGPp7KvVC01maTQ1\nfAo4jEXuZSegJoRH1MUGXWFkkn2mXR3BWVCGOJqCMZIlXgJUcl5jzjrTFZHo\nvspwfGXMbXFciTOvMxrlJOLivRDQX5aF5z3+fMryUfFvH+ViaA68cHzM+nX7\nNWKN/EgxjIeHiJOjHnUCFM9Zq8fJRpYmGc+zCeFpnZjWangtQlmauM0JE1ui\nJYmQQaZTLs+avUGOvrJOcqUDTWkL6Z6Sm3ZiVqNDkRt96xt/JAKkFB05UtTd\n1Mic\r\n=4t9I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdhD/SvAY6JOTABRQ3M6c8KOq0CcDQcB3myvlwTXDPIAIhAJ+b0G1iJ7eH11zXgICfiQLUERIvXut9Zp0XNtPzD3QY"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c6693a0968810b05ef63a1803ab3fab2f8beeb92_1589617539940_0.5286448288813888"},"_hasShrinkwrap":false},"0.0.0-a68dee8bd3ed207fbc6a2ecb87a4036a2ad4b1b2":{"name":"react-image","version":"0.0.0-a68dee8bd3ed207fbc6a2ecb87a4036a2ad4b1b2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.34","@types/react-dom":"16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a68dee8bd3ed207fbc6a2ecb87a4036a2ad4b1b2","_id":"react-image@0.0.0-a68dee8bd3ed207fbc6a2ecb87a4036a2ad4b1b2","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-MXDedCIGwjTBEJRq6r3P1+e8qhiiLotHPpzAZORgxIAXlGIMj7ivBow6BczWHtC7aM19kfHZbKEU3FWgWVNHXw==","shasum":"b8cd28f948091954ef540767968e5c47e337b262","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a68dee8bd3ed207fbc6a2ecb87a4036a2ad4b1b2.tgz","fileCount":13,"unpackedSize":35989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJev7e8CRA9TVsSAnZWagAAf8AP/RoNVDmWvzPUr7re2dLe\nHXj3Cz0T702YMjK1UT2Utr6rHvSiUqbIA5mrahxEs6A+qdHvfhgDw5klKR7F\n0dqrATS4aiyZNcTWZFRjH8z2TtEJ7ZN59if4ZHUybmH5hGYwNi00/LEuPYLJ\nuo/+46a75F5gZhu+WwZu2xEW21oT153Xmk/b2YXQ5As9h65I2CLgfX6X8Viq\nFbBwHiRT/XAak1E6bRhUCruMRfRmVGM3LybEHerFV+01yYx9ivGDWbaDNB5T\nrPdEl7uRrGa+B7d+vV+R1aWVAmXPf4gfjvK0XhP9vXkZvfMh0DyoCLUEvGrK\nGK4UuLTWpcwZB8tSFE7NEp/IEvhndsjIYlOI/ddntfzkW9aP6ETw0EKi73Bm\nN8YXVQ6gPfC+UzprR7w+4tXiVmVHRCsdtvWm3U8OI5m6tlxPA/+BJDYudjKA\nH4P7Q665l2PzZQXvt1bQhzvNwaUKxraVHEdOUYFJihtOYAkpf4um+SiDN4z0\n7NRpIRdl2SkWj3C4X75vxgDBhUsJrsZtIO30ZMwbSHWOx8EVTxsqjXkljLT2\nuiWC1vEUHZayeqeRaeG9dFc7FWp/zEwQIsP+IAdwKXdfC7o9++qTeKQ8svFh\nIQLBSIpJuFtwAcAVtkpArJUEQPYILV0XlKuFAMQHS4LuroEau/KDLZywGYvo\n/9oR\r\n=amYE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzd0/bPxK8uZpNVvVj0Wpoib+vTFPDWAjdBWiIW9yTIAIgCGGHBme35cH3djNZZZdTWXFWLFqNiY7K8T19j/b0OOo="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a68dee8bd3ed207fbc6a2ecb87a4036a2ad4b1b2_1589622716501_0.008017192646318172"},"_hasShrinkwrap":false},"0.0.0-bfa64e24ce0bad5b8e2fdaea752386cc14bc8a60":{"name":"react-image","version":"0.0.0-bfa64e24ce0bad5b8e2fdaea752386cc14bc8a60","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.7","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"bfa64e24ce0bad5b8e2fdaea752386cc14bc8a60","_id":"react-image@0.0.0-bfa64e24ce0bad5b8e2fdaea752386cc14bc8a60","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-1MB7Lhogf+QJmzeO5SWg36awvemwLZK3VlnjKCO7KWnRWq5YokXh3sifVmdAxo8kLbYqgs5BElAn4kgUrwHCKg==","shasum":"af905f98b944e673b1b499dac879bbc111042893","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-bfa64e24ce0bad5b8e2fdaea752386cc14bc8a60.tgz","fileCount":13,"unpackedSize":35989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJev7/0CRA9TVsSAnZWagAA6SgP/2fbuhm07Ocgp+xsb9cH\nLDkxph+l6UavtqwJbktAfR8kApHQg92cEMPkRHSdaHUgKjtU1OhRtyVXr4un\nS7HZBVElJvm4SwTerZg1WMAnYcQmIdc+eVBTiFbp/eThescmjpN/jCxoDbQ8\nC3VsdqchrL9arTHcks1SnF6t0miDMyy/0asQrtLMq9dvZ0FAyR/SQZk1yXai\nvPt4ju3j9m7Pqdn7b9jb3DskTHBSotAvLjVf9t8En0ilcclsbPXfKBKb5S9Y\nInYRotj5GVI4w/1KAn85tZCJyNQg1cOHz4WTcP70PrTIbylTmwXmQDSH606u\nsx4nbtVG//nkkVDe+Vy1kCqeFMDK+G55AEi+PvWA5uugeUldvW4Q6ffvES7d\nGW3qAh7t/OBlBR59AeikVxgHcLrJ1Be4UOFipTIG5dCKvDzar5sYobkZQL57\nFuCI2iIZxcXcuZQdqL3RHon0n+LjPA0aH1t9EaFMVqH6/ZGenez4eGawqKth\nFVWxn7SRWZH41/L5PthuCWvPPZknKocA8p3z+GSLJGHiFZxDske50ewDiWhO\nohXxEOK12EjXwRZnqDNY0HGQ4KSpBIR0Dn1JN5ASUOV5iLubIHIbVx+YMymK\nPEb112RXeB3AKwOR1hgAaVN1ycf5YYsraPwdv6A/bm0m+rbgLB6WfoF5vJzB\nU7FN\r\n=ysgy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEinmEvcry7a6sfk6lcimO6AnltuFqOXAvsT8eqgXWFxAiEA+u2q3T0Qj7Zj2nvzZDtcDxEOOKd0cUKr9GjRE5Jw/c0="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-bfa64e24ce0bad5b8e2fdaea752386cc14bc8a60_1589624820171_0.7258688809931739"},"_hasShrinkwrap":false},"0.0.0-315448693ae54d2e522c94ed6da0e90caab8f91d":{"name":"react-image","version":"0.0.0-315448693ae54d2e522c94ed6da0e90caab8f91d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.8.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"315448693ae54d2e522c94ed6da0e90caab8f91d","_id":"react-image@0.0.0-315448693ae54d2e522c94ed6da0e90caab8f91d","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-4hVTvnbnEJsh4dtNjB9rjkwBucykmyNAVwgp7iGb0WqA+0xu4938bNOLhk2QcUBPb19ey0UjcCHWVRrJeSbD4w==","shasum":"5d455f657fcc0c3b10583c820fbe300f6bdd830a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-315448693ae54d2e522c94ed6da0e90caab8f91d.tgz","fileCount":13,"unpackedSize":35989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJev9SwCRA9TVsSAnZWagAA9zQP/1ii9a4gNVYk3As8CsiQ\nAjXEI7TEnC6D07ytfxngK33C6BCDgiQhNaLEhJ6eb+WxOB10wfkV83u7ztLL\npyCFbyTjKhFKKe37KvbrDJqQG8GQxiletWNqJfDCzWFYBWT3T052/9Ms9SyU\nqaz5ObJoq8UxQ1XIpbO2m1O1cg+GuEt42pPyiCohMJXLwAadj0CbhYe7tOan\nsc3DggEs4ZBUyUSAGqXUEtEMNrMp8oU1d5arKGCZJS78veNdcTsK2PFShd7K\nxOab7C0RvVsCA3hBZM98FAPtVYp4fgqJaRqJNMnktlPMhbOdW9J+cZX+PXOd\nkSTcv70Y1tWzBNO/3VG7l1Dg9JasTLW9lfB0moHT7T9QxiRrc5YgpWr7OJQz\nXIFk4tjA8K6BH5+lceRSgspgEUbNLD3eXJwwOQKxKlONKEzbqMGfZqQBgHN2\neoAN67Vj61jHMj1JoCT9TNJSspBc1hOo7w78H0yxsMMjL67wmBDJCZL8ga+q\n4g2QiGof3NYE3TZPsk4fvi/HPoReq3rrIifcm3aq/cnf/P7gBKoL8AuEQSUE\nsSVG1kQAN9+EIlPM+8bZRui3xsBlD1cXfPMBZWWth9dY+RfskAzI1I2YQ1JW\nFBy90QmaD9jdrNIHur7m0N60RJTo7Qra1iI9llSRhavobtWx5GKhnD8h3OC3\n9Fx/\r\n=4to7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9+sKSR8Hp5gmEyAKJfPtrpDjJfqGnYXbYhiHKPGbv7AIhAJm4JPzWRfguQ0BWKnpBSRW+3BBXpqW3bqojGAG1PdWv"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-315448693ae54d2e522c94ed6da0e90caab8f91d_1589630128125_0.8843494003783743"},"_hasShrinkwrap":false},"0.0.0-efcc53f1f4101a59c0a7cb4e8613af55f4affd37":{"name":"react-image","version":"0.0.0-efcc53f1f4101a59c0a7cb4e8613af55f4affd37","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.8.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"efcc53f1f4101a59c0a7cb4e8613af55f4affd37","_id":"react-image@0.0.0-efcc53f1f4101a59c0a7cb4e8613af55f4affd37","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-kwKw2bxSdbAuln9XJrZJG6akEDg3Y6rDHTgrg+zU4jrZNIy6MFqnscL7/zI/N2VP5eOsZuttANqxyiswpDzgRw==","shasum":"4ce75bbb546807b99c5f1fce9df017dae8b2ef8e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-efcc53f1f4101a59c0a7cb4e8613af55f4affd37.tgz","fileCount":13,"unpackedSize":35990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJev+N5CRA9TVsSAnZWagAAtz0QAJTqBI5iJFUqGFx/myAt\nAbJ4gSEHmpCIeLqGfDNgHEFaeS1OYqiMOEufnHc9cETVqXjANmg0YNQ6Piiv\nq9Mlz1cnI7ezyjbh7Z+Z/IxPT0LaQ7MwnFGNoTkCZFTGxTHF/0nV0bg7WctJ\nH083bIHPTA/bmJ+uOrGL6ovy4dpNdtMioxN8nwrpDJHaCZ9HUgQlvBhIqoBL\nrvAkarHcYCXoY0Y0Lzzp/l5sOaqcdJwEmVja2QcaisIQHiuWYyRo5tvhDhUs\ndvrPXQ815vhtZtiWYgPAI0bvp5Dy+y7mFYhGfMzEJAJQhTe0DaklHB3gTe7a\ngaVxqaVXJWSiCFxCiDXCEcIn11af31p7AYHSiKltmj1KAYErEXRmIfzxPrWO\nO7ECdDWsIZhumRHMbwLlyjsKDV0QqHkh2ZrA/AHeDiOZ/HuX4y8LGN+FtmQA\nCU29B0VMzcmLUM8tUB3SBDxepK+hkNjkwTpELcLLTOTytgeLA3EGfxdpUmPh\nFAHEyT/eaHRsjYHBlcuzm5lruU9hlW9+fgzwiesM12KmMOJMRJF0p3zZzkUC\n7R0MCI6OdZ9PoazYtO/qugyRxgKNtLkovyUY8voD2NKE6qIJTaiAYKH6glFC\nwOvhuTZXQFfvDABVEoZb3MHQdMaB7lelTn2WnGxsBMXqRHwBZW8u9GjA1ZNL\nAB+X\r\n=ys3b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0uWLjYuw6KC2rgPadUSPVwCmU3KI1hta5QO3iYJinSwIhAOaU9E3GPt8kZG+nMRoINwTAdVQR53RM+KtUe15imuzx"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-efcc53f1f4101a59c0a7cb4e8613af55f4affd37_1589633912855_0.48605437928020856"},"_hasShrinkwrap":false},"0.0.0-32b4c1f7b2f8c0bf6fb025ab3875b6b77914344f":{"name":"react-image","version":"0.0.0-32b4c1f7b2f8c0bf6fb025ab3875b6b77914344f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"25.5.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"32b4c1f7b2f8c0bf6fb025ab3875b6b77914344f","_id":"react-image@0.0.0-32b4c1f7b2f8c0bf6fb025ab3875b6b77914344f","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-FSDAkQjOEElN6awdZBHW6X2NLLxpDKMahRB5lRVfSQLotwzPzpmTYVNQh+Rh97acKD2mj+pPcvwZ8Oj6Mrj5wA==","shasum":"fe5e635656a47243df18c30dd4ba30f8fbc1b456","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-32b4c1f7b2f8c0bf6fb025ab3875b6b77914344f.tgz","fileCount":13,"unpackedSize":35990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJev+gHCRA9TVsSAnZWagAAaicP/RJMYmF/daVxEA0+c//0\n8V8VE01FyFr3uxlyLCIsmF15yOA3xRkkJP85t6BKAJ7KjM8IEGAyrY+H2u29\ncoCZK6UOQGlqL9CbNWUXIwfMy5SH7dhTdUFAIPJ8XRUinqsOzEvcSL8wv7Zf\nHFaXrnCTuU2jgalsayqn+hCKAKajXITtEP/9ehdd7XuQRYd3JQXWxAyn66SV\nJLO6j6QgZQAl537vXkQQ9dtK3efVszVQ5LMpyms9f7aWoAiFwnbT53tMCZne\nLyfGxaLHAyORn4wad1eH+F04YBnYpjL0Eg8BCsp29bNPupc3GPV840W+KFOO\nwXRhpC1ixve/kceBV+GKM2nqIOqvrLqxzDggBm3Ib1oQMB2bagBzzSRhwm/Z\n4HK9WMkAJlbfp/R7a6IiEdTQeB3FKKvYTPkWZvS2M2kOTnItBMaR7UlkH0yx\nu1JG5P3gkyfTSQp4b7LPmyMTqhSnsVlBuvhoZR6ZG448K629Wl9wqP/Fna3M\nYvYxlQh+/I+N2220tlIkroikXzuzvvzqu7hCHgWFwhIvcUT7E2xLpdGZyMk2\npeUheIUGhGc0PJc1ATgzBzjcev2Reh3qXJeTjZV5PbTkAccdb/6+aclHKafX\nPRNSXxxnfK7Hj300D9DCdQw8tLvQkBBDl7cj7njy5O6sFDTxRhpdQw6EWez5\n/mbe\r\n=BhA2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsj+2qDr2Sn1XdTkp2nuP9BJYZNRIZ/30xM1NY2hclcAiBdVJqea1cXZeUPhIHUmggk1KIsAk+UnJInDqx1dveo6g=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-32b4c1f7b2f8c0bf6fb025ab3875b6b77914344f_1589635078558_0.2667330692865788"},"_hasShrinkwrap":false},"0.0.0-ba94086c7c5609bc367cf45cbab9fd98843b8ed1":{"name":"react-image","version":"0.0.0-ba94086c7c5609bc367cf45cbab9fd98843b8ed1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ba94086c7c5609bc367cf45cbab9fd98843b8ed1","_id":"react-image@0.0.0-ba94086c7c5609bc367cf45cbab9fd98843b8ed1","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-kdArA11pdIAqhWBRP12I8VOQkxWnqRYNbtv7p69+uVWt9FpUHQ4yzl9g/TgyOLML5WSnR4Sz5C9eayD2wRAqPQ==","shasum":"8f1f6a9c31cae013cc69c8ea58287ebbff793789","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ba94086c7c5609bc367cf45cbab9fd98843b8ed1.tgz","fileCount":13,"unpackedSize":35990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewVBQCRA9TVsSAnZWagAAGyAQAIWT7Y/BBS8TmN+usnQh\n0tueD8hYd1iYgEWT0mbvi/M4zvgiOOrl0LriPU6YK/jN3+Xy6jXSysvwr5qx\nivefQjen3I9wAfPxQ8Hktgc/6XNH4OXwo791MfiuP6oj2JJVjhnncB1N8/J3\nRhk79yxjw8I2uzKn0NXzDrQfERXaLpEQyG4k4HUpz3kSb8PAgmcez4I2PyCJ\nq5aGtYKIFzB7ywBixkdZ3yKahHSnbWyibcD7SY+t2mDW9UYSRenAdNMXrImg\nNNQA16BZBLHjhCkLqEoMcwlzT0qG2jZfZoy1/QnJGtv4qHF1+KLwbQlk84l9\nM5qoOjkXm0NLrbfv0Pa14KTOXeqBZG89JBCOhBsuII9t5AdQtnPFqrBri5Ww\n3J7iP5cyw+Gjo6//JwZl9PB+MEGZU1SO9excaISi0LAmMZ2MyzpsDsddP/Xw\niKZIlXlMrTeR2InxvvNLMxDcYxc6GNu2P961ujKZo5A/r15WyI/wWQaRhBDO\n9sCePesHY7vWvHZxD3rvVY33ItJ3nisNrWRN4zGiW4jCKLbIhjfjXwYctRh8\nSs8ipYErREOL3ifdevqF63tDWSZ41d91oHPSWJRU2RbNAUdVf3ScjB6+0q+/\nhzhxiFt/W2Tug2b/ykWpPWdL5pjWV48/HQcjlIlwfh+BxkeHiO8IYo0vLKSK\nUpwJ\r\n=AAv3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESXyZlc96ktopw53vePpcY3rGDwFC95qmTYv+orjEGzAiEArZx4Wpb2Gi1Y5lhmiwgIY3CTzpQrpveoiDJLbHzF5S8="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ba94086c7c5609bc367cf45cbab9fd98843b8ed1_1589727311624_0.28636689744167043"},"_hasShrinkwrap":false},"0.0.0-a23ffa80429d83f79d40e2ab2c4b4189b692d8fc":{"name":"react-image","version":"0.0.0-a23ffa80429d83f79d40e2ab2c4b4189b692d8fc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a23ffa80429d83f79d40e2ab2c4b4189b692d8fc","_id":"react-image@0.0.0-a23ffa80429d83f79d40e2ab2c4b4189b692d8fc","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-AC7I6NZYwVvblHhHchXXY4kv5Vk/eWXIJPnZhi59W5kV1Y2Jzs8wgu6r6oXppH0TpAxGeS5aaQort+eneVsHRA==","shasum":"cf03ee8dccd774927c6db96448adbdebdfd207ca","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a23ffa80429d83f79d40e2ab2c4b4189b692d8fc.tgz","fileCount":19,"unpackedSize":37596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0VqCRA9TVsSAnZWagAApZgP/2sotCnfbYmCQAMzTtXm\nnMmgQWSBAHQQksvLfc//kxF9hyLhtZ3gPzMpDthk0ndq7AeUw35dIIX9vvGs\noOZ4T95OcNUWshQ7AYT/rWpAk39K7xYdRy4s20XvXr0YqAecUWegxFFak09X\nomGqpgGxm3TPS8PMjSMzXsmMhpx2b0Tr90z/lOVAoexN1+9C1jlFjLxH5bej\n56FcZ+XNGJj+RSYwjLc6QAtr/OekTpp+SZRT0TOerW6TxmtVZ9mZOmjoxXpO\nk++yJht+wQNaJ0g+J5pg4+/BsW6GnhQCh+6fl49+kJLuCXgsd0pM3q/svpC7\nlEYKf6ARSxofNRM7xjLYfC5Tqjmyk63pmB/igf69KHCSPy2LHgU1J4TBEGZ8\n7PCwNT8NdKcHp27zeSGKDrwYn5bMoDBzMwtqUSf0cY3a1f8CE6U1Eb1i2+fJ\nQ2Tfr9JHOjdjlgvO89YlRkD2nbwSsAE2kRAKzlFg89AMrTmAscyDUCRw1Vmk\n+ZEaU/i6jB2HbgFp5ykAQ2Htkg2EaoNSzHYH80SFDvFqs8nrPkQwuaprmfDz\nqw/23lwRJl6L0ErLF/4oxzvBA2eQGR6LUuyMsYKl9iRCI3kNy/qZDi8XeCMz\nYvvYvRkUIijMlTt/x/TCg6fdWCOdeJGSZh8D5jFyrShb5vh8wlQrVO9TljZP\nY5Gc\r\n=6i7Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUi0O+joIy0i43jnbWmqPPqxMAFB96WK828iFlWFYMOQIhAKzRml08wxcX5SZovGe76nMV4lJBj/8CktTDDgShaoru"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a23ffa80429d83f79d40e2ab2c4b4189b692d8fc_1589855593898_0.04275213610929418"},"_hasShrinkwrap":false},"0.0.0-704a609cd5408d5ebf9521550008d5a7fd06d369":{"name":"react-image","version":"0.0.0-704a609cd5408d5ebf9521550008d5a7fd06d369","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"704a609cd5408d5ebf9521550008d5a7fd06d369","_id":"react-image@0.0.0-704a609cd5408d5ebf9521550008d5a7fd06d369","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-661j3LgZ90C8lZIxSzqRUkvKbwgTH1ivmj6fhiBD4S6PX6UvMiodv5vr1pT4qFMoIqVj8om5uH//WZ+NWKZq8g==","shasum":"6fe2aac570641d7a63a84d922c6ec626abb3ddd7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-704a609cd5408d5ebf9521550008d5a7fd06d369.tgz","fileCount":20,"unpackedSize":37636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew8pRCRA9TVsSAnZWagAASw0P/3xh7QE6N1XtiTscjoxo\njoiT5s/1/7f84tpQcGmSLe4ja0LDiVDPqnOYCBEw1ewPlUSzpmLgocY6UiCR\nRIy9wqma0eln3Mnt8nST4/OLZ44lYcUDy9L3/DfpbTAuOq2sLJExKsbQgjwO\ndk80DPStqNBXyn5lxIOS4f6xrpP++lS8YgRbDKC/1wXJfFKn9lUQx6LndKvH\naDk1Y/Z38D/QOD6qep/E3/X5qDo0s27Egd6wUxbYGxTesrE7MELaNsG37xqC\nPu2DofHabZFhYQlRg4VIfCdcrYz5Cj5GS6vuRaNMSxZSKvzfFZhKchVU+XGr\nzIGerxG7JpbshdKMK6KyFy39CzOsVanEDE+rbh+PjnHWAo0gw8Y6XMfPbfSi\nYcnyY2SFVrtMi98WMSgjmba+Uv31vmgE6Rtpejjy3UZzGapknIicOvFonfvI\ntKbWNXuqkzTslDlvHKOldDY3FqIX1GpswnA9xEul27fMYJ4c8z/Mo+9zdEHQ\nWqEmQJGBUCThxO5DBTotDFF8FaWP/ABdWxFEVRhModyTz+H0OVe4IV5kBr1s\nddGO8aj4h9GxSh37BQ2lBi55G+R+qMIVV0n0f/iWnhAuOUVl7MJfW3w89SFM\nZWYziDIQMxrzX9m9ea06RFIy7LYMTnQ3HBcjrYaW/P87NXgk6ZFyBN+HItkx\nLtLc\r\n=Gmso\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoxFA4ze8oxH2U44P4v8ufTTDYIQNBOusPLz3JX/bThgIgKsyDlWtgvQX+go9DXxtNaSPXvQgdN1D4p8hH8VKmuQE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-704a609cd5408d5ebf9521550008d5a7fd06d369_1589889616594_0.8987083725969385"},"_hasShrinkwrap":false},"0.0.0-9442ffb641a2eb8b8f01fa27b49fe0f96ce72fb6":{"name":"react-image","version":"0.0.0-9442ffb641a2eb8b8f01fa27b49fe0f96ce72fb6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9442ffb641a2eb8b8f01fa27b49fe0f96ce72fb6","_id":"react-image@0.0.0-9442ffb641a2eb8b8f01fa27b49fe0f96ce72fb6","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-RCF+M9U2nlir+SUo/tWeXe424DLsnzdRLuach7/+xwnqhlwXJmFUhZDwg7cEIEoeb8rT0Gl323dESQYbFG3xJA==","shasum":"57b373540ec65f1e669e86cf69396e8ff92d2663","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9442ffb641a2eb8b8f01fa27b49fe0f96ce72fb6.tgz","fileCount":20,"unpackedSize":37632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew8z7CRA9TVsSAnZWagAAMT4QAJfAABcYndX5hwry96ra\nrwHDf1FpXVMmSyeU+6/g3ckWF2dTpO+LkZQ2XTJqQQ3dbRtgNcaRcBcenezl\n41UKZjAN7SEFMrC9s5xCdqnv/qg8/JXzXiA2DLTzLEKUh/jKTMROGzclQiH9\nYIR35HDpyWufwpwfxqweoyfRB8lkyr9NMW0SEfHm8Qost9XaKnn5stPyH0W8\nqEdDdtMw10a8KyESkbfn21S+uO3OcGCNlyM6C2unEZgOUMYhZoJCEI3tGJ0/\ngnMjcoLggXHxsKfLVkV2L4NBeFFukwPyyFaiH3Ka8FzialYanYUNNXMVduG4\naMwTS4Y3t3AWwo/eyIEChIXWQ5rNOf8lb1ggYNPC9mkprxfc+HzE30Z2eLEM\ncuSFBnlgXkvEOgbTyw81PAcMg0jwRB5Y9wntonjYoLO5gPJgeXgATNjd94M2\nC69T4WDUyuJohSV/uHQYVPXwbRcaUpsMHI7FY2U2wWVwIBubka0cJZdoiogt\n67STxwxDT4bZJhOTXIjfOW0mqWdZfanc2NnWHe1BZ1oi0yYUANqpWZjU29b2\nghdA3Si+FkPBBerpLUAkdrO1kelsAdn/rp9wDCHghJzF4uny/bGtWakbaouE\nx/+hMSGaPX1r4Q+Z6O8Pk7MBukvnONTVpqtsezDkkeCDiMgfwwbFLM+rKpTn\nYvAh\r\n=yl5v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfbhBvd9XItN0P7/hTmGC+YuOqOkmAKFFD1RFJg6XPJAIgMGA+LiFxTsfBYwD2tDHsRnLTLmUERL2DnNVs4YP4UjI="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9442ffb641a2eb8b8f01fa27b49fe0f96ce72fb6_1589890299375_0.04031696691928466"},"_hasShrinkwrap":false},"0.0.0-4e79f5a4063c2712de1756c65ebfa6cfd8bc36fc":{"name":"react-image","version":"0.0.0-4e79f5a4063c2712de1756c65ebfa6cfd8bc36fc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4e79f5a4063c2712de1756c65ebfa6cfd8bc36fc","_id":"react-image@0.0.0-4e79f5a4063c2712de1756c65ebfa6cfd8bc36fc","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-O1+svIHeOLFTvRg0WlJ13BCRlD5bgmhwA5PJk7bJtFRTmf6htwlMk2kc5QGycXUjZWFc1g5SomdkgUjTue3aEQ==","shasum":"19e41e3497e70710283ca73ff92e519e575b3ff7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4e79f5a4063c2712de1756c65ebfa6cfd8bc36fc.tgz","fileCount":20,"unpackedSize":37680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew9aQCRA9TVsSAnZWagAAajsP/2GWoyOvPMH1laiVYfAe\n16JXa3izPPBOq6t4CpMV20milfaCJ0oBLO4gE9WgDfH3zpDJMB7hFw4M/tuc\nJ/8EoG1MXxxvZK5/5LKxqUC0h9ihOnJRnyr+qZ1uHUUtDE8jTvEfbWPRnkdo\nrLBfnT81naHPxIWZPPgLBWccHKDN4+w2rdx7mcHBSuHAxWiUDlS0xZphGipA\nBWlcUO+NCgGlq5umzuwWGZgS/IujRL9/93NwWPjpMc8CsAVfhDDAkTMBWBVr\nS0mgUXi4yH5b1MKeVDxH3IvOBosdlTeYsMXqjWEW6WoPxy+2m7Vjf6B5C/Fq\n1nsxG6fLYvhCi+cdma8bLAi9WzjmaZmPKSeoHhCODGyDJEJcWcc/vfUCnGZc\njLpojmL0U30nFV2wsiFnR9t31gsJgrZYjSzVWTTapkW0bPF8TVmv/+JeECIb\nTie2twfTPURVrhSm2fkjwwU5ynO7ONLazH7FmppvnyF7qhtqsrGYRBmjxGqe\njzdbNzxwvOlkYbh2W3qFIIAwv9kFoeAUKQjlDaXZ7Aj1ZaMd8FCGGNa07tih\nADqukKs5RBChHmnFvvOlNQiiXxC+Qf++TV/m7/7OIHoy5X+EdL0fzoNXh0Fb\ntnn6ei6SIOfOT5iplsUQllHkpvS1ATgYJSZU5+AASzXtF5l3Fzz/wTviXveb\nAgMW\r\n=Cpzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYmYzRXgANRyx/xS93/aZTU/FK25H/J7qAdirH66l+CAiB9kveFrNp8GtrSM7XFhYOGUpT0roPiSDdkXeFdJWlEAg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4e79f5a4063c2712de1756c65ebfa6cfd8bc36fc_1589892752392_0.9919308259156072"},"_hasShrinkwrap":false},"0.0.0-29a40f8517d0a41ae487c18ba758267ef1299945":{"name":"react-image","version":"0.0.0-29a40f8517d0a41ae487c18ba758267ef1299945","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"29a40f8517d0a41ae487c18ba758267ef1299945","_id":"react-image@0.0.0-29a40f8517d0a41ae487c18ba758267ef1299945","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-EPjtv8r2+XsM61vH4bI0UFmyyELV+fMO4DWHpT/VavmQ3wuaz4c1xnmfo3AmWip8VsfrszgkuxWh8xT19CwI2g==","shasum":"33ae33f1668f3853506b5774004da87cc2aff7bd","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-29a40f8517d0a41ae487c18ba758267ef1299945.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew/HhCRA9TVsSAnZWagAAHCwP/i9ejEcdGQRi84dXfzpL\nk9wM9fqlBv2Z12TLnxPuTHoxMaRbMsg8jUTWih4Enqc57dCL5xL+b6zXXSyF\n0BmkWdZNxbxQhfaqNeKHfl8A33aONONURHCXvVObIHrXo5lnYr1pT8pyQzBC\nvxbyPfRd1QFLMAXEK7iVGR51R4P3kqBmjMX19JyMlFVaBqmjTTNh3TtISEGA\n3RdhqT/7tIRio8jY7KsP7md6ZK0Ld52shDt1KPx0inuuzV+se9867hdC/x+F\ntiAA7ws7Kvn3upPso4KgMD0a5MwjfoXHv0OL/A240XeYo5tKdc7vEfa9hLT9\nHnUa2vB4i4GTtLs3lsiVg7RfD6+5sMHOa3G6iFs6Mg+4MMjOrJMLlS4rAoh0\nSZpg2n3MNFC2Pzw9wetN1JDGbZBIzppEsJAk8HM4qtjWBqoALEgw/vZwVB+A\nXMjqG96mFEBzHRTwofZEQBm7A8DyejLfJFJoQEpgq0xGzqXszbRc3L4DYm0c\no7b+5awLly+KjlKwbRzHaIBntXLGztBvbQkyO5kqQPDE8UKsHGGLHg/eve5W\nzK9Zd1W/RhfdKvtEelVxfoZtOhwjA8je54u/AjcBYN44td3wgy+4XZbQPK51\njwmVurw3FmF/S9rCMycUbrIbMkcqh4YL+uZ6yK8tmsycBxbM6vwFRQU96+n4\nUdw8\r\n=OoYT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBDrr+kZYSuR8jEHJHnaEgjwN/jXYgLGd0g2kwgVoXcFAiEAn3hGE/qcjAcQUb5l6DmYaubNbbU4cRMQ2tp4bZ42adI="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-29a40f8517d0a41ae487c18ba758267ef1299945_1589899745190_0.22630694278924035"},"_hasShrinkwrap":false},"0.0.0-fa9bf72e183c99355bef7fced71637b8de83160a":{"name":"react-image","version":"0.0.0-fa9bf72e183c99355bef7fced71637b8de83160a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fa9bf72e183c99355bef7fced71637b8de83160a","_id":"react-image@0.0.0-fa9bf72e183c99355bef7fced71637b8de83160a","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-vqwrZr5kOr8RoNvoO/NYDRIN99ANoGNg6ujeZN49GSn8yYHkdpeYkeBUU4j8yi2lPsBXvFo2L2Yy54fylXncww==","shasum":"553a4b2c181f0f982de95c7f3f7cf5471058ba0f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fa9bf72e183c99355bef7fced71637b8de83160a.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexD0sCRA9TVsSAnZWagAA9FYP/2G/u+ysbCsKOLzJgwr3\n+JX2/C8lnuT4zTAOja4768YLsd/X+zS5Lfn1m5NC3CEyvAOA8owCCDan0ojm\nOnwSTBNNxBZ+LsS4qfhDkYFk5DO7yF9w6JIop5XpQMXz4W6TBA0MMUszEotf\nZ6ARUIALNl3p5JFccdK3zJulxFLUpd+skBzAy9ltIZHjYvr0Iq5Au3A/3CKv\nBvrKTBjlLI7IDrk6jmb+8A1PXefN1nm99qLPBswZwlvnXbmEoe07c1GXCSQl\nJeoPIf8oe6h23ZpoiiEsm8tqR0NhyW4DO9qkfw2SIVEU76IKCIpg++xEbSjf\nw+mwNdA5ZXOwrSn5m7jXayrwDWTAZwcF40Yln3XDJwbdc1tUrpCTmO6TOnix\n9S/tcpl2aGbkW0IBr89OAlWeh/F3JmzWa7jcLAykH6pPbJyFSy42ZmXiYcqc\nJNuIuFWDe1VOosYoD5p6h9pzWHQ/s7Mho4zLgZmfrTRWlLUdQRuG/202FZFd\nj+/P3F3158CyVN0U2MZOZpzoOTRKN4u4CDCW6Hec1r8odgEYzfg70tWVN/va\nQ4TeeqgU89lwrbDIYWKLqM7hcawMWCptnE+L75F2JJstwtRWd0sVs+Ku6Y75\n7jnRAC247uIroZHIib/68X/4Nm+p1WMMV/zT7KCUqaUNcq2aRNhL1AnoJ5sd\n/6ku\r\n=HB6+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBw4WyXQO17uJLsilgxRF1PckaAg9Vl1S0RmF1EjhEbhAiEA4u53XavJ2q35v/yU9bVF1l6jb7Bl0EVH+sqzuOGc24M="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fa9bf72e183c99355bef7fced71637b8de83160a_1589919020383_0.46334101815421325"},"_hasShrinkwrap":false},"0.0.0-b68577cf09e02d92c486ad38fedaabf90696164e":{"name":"react-image","version":"0.0.0-b68577cf09e02d92c486ad38fedaabf90696164e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b68577cf09e02d92c486ad38fedaabf90696164e","_id":"react-image@0.0.0-b68577cf09e02d92c486ad38fedaabf90696164e","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3V+jPW5iiZswDGrYjFvdQ5Nuy6dmBu0JfKgRCS2Dg38kjGpQxPoRKJJ/jScFRjOdbSpNyAnJ/1fmjE+CHk1zSA==","shasum":"d5fecb26b8f2bc67b4f1b798d38ca376691afa43","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b68577cf09e02d92c486ad38fedaabf90696164e.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexD+oCRA9TVsSAnZWagAAoHsP/j6lq4Zd8S9mcawYAjXs\nDV836BoqKySw3racJTsfF4FdrqOf81aWn0LUvVcGvOGfSEywkgrpNH/Zy/j+\nJ4yCJq0DWvxSS2hfJHIye5S10jp/oGfG4oqcaLyOMHPc/71s2Xqkph2AN36P\nBlHTD+nv6Tj1WxaibxsJozZksMPSGUvwpa8CYMP7kPWUO0tFuRUvF+n77kGR\ncGllE6lfQn58bblDpdvEQ1eVP3FYtblFe+QsusyDYwP7HUPQ+tH0vSXO0DlC\nVKk5kvv0ZC1es/HNK74U6OU2xoMVUGl53ujuIh5+RUzvsVJ1mMKDtzUpJoXm\nIPKdTUo0vKELknkiK+knYRD9sscY5kGDiqZNVIrO8NQbryfKZk/8Kx3nHPcd\nFS/bH1IZ5qk+bAXWqyNhMgX/jq9KjE5P0q8S1nxhKuLg7Cz1l6xjxYIA0i5q\nffaHJvJsMYM1MBzBfK7OxUrrDjtR3UBet9u/eXLEvk0hqJHvpvlMRlsi+13k\nNNUX01IaxfTJ8c7Nmls59ZlmloP3pyiL7WTwmsFsCctCqaRnhbH4/B8sFV43\nJlqxzyL5c52EJZrFZXJhZwZrq/zvIbV93sQuN68Z8QnEOa/jX7og3jKT8O0a\ndAHFO0oksfrnAFHZeoH+P6RO7UxswELRYZli4GtLZ/8MKpmT0WIe75ubqnPO\n3SoW\r\n=elrk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQaI8yqO1lcVkSZPmtX5C5TjQ4ovoOcHVOyV2/Icum6wIhAIMmlo5yyqT6spGBdjFLJmgqmT4DrNTGoMZ7awQVL+19"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b68577cf09e02d92c486ad38fedaabf90696164e_1589919656105_0.5846682242474568"},"_hasShrinkwrap":false},"0.0.0-214293e333c67a6e28f5fa8debefdf347f8def92":{"name":"react-image","version":"0.0.0-214293e333c67a6e28f5fa8debefdf347f8def92","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"214293e333c67a6e28f5fa8debefdf347f8def92","_id":"react-image@0.0.0-214293e333c67a6e28f5fa8debefdf347f8def92","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-lEfG3uw6O2lPBe4aGaQEY651ho+cHqwosos6VDD6U0eWO6Pop1m4MnDiZ/h1gk0n+Oq6PJRerMlPNviC6MeqYw==","shasum":"e47002008e71afe362f78e208206b4a1d87b1fe8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-214293e333c67a6e28f5fa8debefdf347f8def92.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEDLCRA9TVsSAnZWagAAi+MP/3s+RN3dAp5e9JgSgcRv\nkXMlNm1tmpESYRayMIySf4TO9taE0jmSIcNJe5NdX3ib5jJTiv6DWU3OFtOt\nQ9+bmqaPINAk2nGuFz3g3K3o+I0vUYxcl54EEPJPQFTeIWyeAbyCz/T4pnTg\nGOZFvDrEY63SFT7xADHjMRWpfOM6n1VIvzPfLiX0vtD9FJEnEOCvmcG5qAms\niB0MFKjWg66cPan3pVJ1IXs6PkCKqRthBvVKQPIb5WHEhtsF9rKvoVO/i8wR\nMl/+z9weEx7QGzm3pzTkVLCl5nbVOFLEeo8qmwZqgD8+vw0e2w+Zksq+qKdQ\nEtrNktVGuyhp+t+bxGkg85se39m9pZbqbmFmXk9c+htab1K7VjihF7U36TZQ\npADkgZg/r2ZHr3DBh62abhmuoLAkcoltPDqKNj2XXnDWlkn8PlAilLKFeMGf\nYREpPrnxrth1xR8tNSNSfjfY/P1OCXapgNfgLDDN/+IJlAN4p5Ky9WoW+DBN\nK5bLnjgKZQ6aHL0+Ih2o7aD+ywc13bWV+i5DEsneTghJxrWloUVyUbIS4xIg\nLKE+ELRqYXPldarjl4KktBQOx6LqSkhwLH5nRq+0dzFkSN7NJmP6cQ7JDZfy\nOz8q9t1VkYcOH6wnTCDGxddcgZq8uIPmoAqlfIVrEoVz6cizDPfePctdJt3f\nIYEr\r\n=HHYl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKdjpeEW4K5FSEu4Antn76MG6bj/Ca8C1qYGha2gG2oAIgGsBacn4lIskiozy3LIoZu5YOYelmrKXiyrpdu2k+aps="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-214293e333c67a6e28f5fa8debefdf347f8def92_1589919946603_0.7450806342257807"},"_hasShrinkwrap":false},"0.0.0-0b4fb07c22c50f6f5a39d401005c67aaafb1e0f6":{"name":"react-image","version":"0.0.0-0b4fb07c22c50f6f5a39d401005c67aaafb1e0f6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0b4fb07c22c50f6f5a39d401005c67aaafb1e0f6","_id":"react-image@0.0.0-0b4fb07c22c50f6f5a39d401005c67aaafb1e0f6","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ZXG7aJdlEr2K3x4AtadaQaMfGxUuvCiXlfOnlMFgMwfbLKl1R7HzcL5oJhZMkJ1bMFr13Kn8pTUgIh1BII68Jw==","shasum":"9d1865fe74159c5b783f5b00572d170a5ec42536","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0b4fb07c22c50f6f5a39d401005c67aaafb1e0f6.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEGSCRA9TVsSAnZWagAAXpoQAJ9X71JpVL5inEhUJk1s\nyd671Ivbosr9KllNrfEgBXJbjvPq1wDUUc0FsORNdM/xcnlORFFfeFJdllcq\nHN/Kte/yCdB6+RlJB7WRXI3/KVc2KhU16mChY1IzRJS0fLLP/6uOo3z2QtH7\nFQcZWN5q4JKZQdqSwf10LdkNyAKjYPcpatgpYm2/g0ndfLnQ8eQj9uJ5OYL0\nRa+xQcjT7MwFot03bMV1fp2GX6l4lE5kD1bPKSZFJfist1zc9oEzFlxwyUge\n/mIBlvDGy3N1WvITPAElNQvW5QG5lTL7eVC8JjPP/mnXJQByjQZy0rYHj1Uy\nmaw+LyoTRvjcL9BZ0c4GswM83hKEMuO4seBoOCNLBrSLHIFMhKElHJniuEQM\nOKTCrfhCCY2SgBSBEj3a8CUWMYjmiXl5SpEtqnwNYe5Ayfg/fWF00fv6Sk6V\nVnP+Ml+cADNkb42JUF6B7EWP3HBFbm/Rw9e+dnQdIXBMCGoVmFioAykGzMNk\nRsl3oDIT8UXr5kO2//WketIAXvMlvfq9uHuQefsH0XQotk6PnIOLwIXjDQ+h\ndN1TJRp6xd90t2uEjJI9jr4s8eZflbFEj062dtkG9YkOe4j5GAi1tIdDaRLn\nlF1dRwUYLl0xBsxprQquA5vfzGtOQGoB0WuRM/dGY3X/6SKvjZK5DMEgVw/R\nDTTs\r\n=K4O1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4HduRM//SwAm3aZ9eTVtR+MONHHXwlbVPz0Sa5JTkbAiB9A3f7gmURdhcElNAD3CJyTDLbeVPfgH91Qceo710afg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0b4fb07c22c50f6f5a39d401005c67aaafb1e0f6_1589920146326_0.554425578611613"},"_hasShrinkwrap":false},"0.0.0-f2b9228a5b92389cd9dbeed21de8f95aaa89e059":{"name":"react-image","version":"0.0.0-f2b9228a5b92389cd9dbeed21de8f95aaa89e059","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f2b9228a5b92389cd9dbeed21de8f95aaa89e059","_id":"react-image@0.0.0-f2b9228a5b92389cd9dbeed21de8f95aaa89e059","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-KCa1gWK68Y8VTwyOd+nt2MrBppkBB17ZBTeTgW5gH1JIrlq4AoThoGwsS7uq6zhBCt1U0s3ME9k3I2x/6gYIyw==","shasum":"333dbf5da9de6b71a99b3884d8121d4a2c870391","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f2b9228a5b92389cd9dbeed21de8f95aaa89e059.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEKOCRA9TVsSAnZWagAAiXoP/jFGfAPZmRn5mcHePtiP\n2carETaqUtRdDIH6dqlC3nFoYA6UVHGLmw7wZ6IbkFsX1vaKUo0ZL1hv0pL4\nAHocUk+2Bj5h00eDZCwPQrASrd9UPOElXKj3UlqK2eeSm/JU103DKSIn0wow\n8scjcf5YbVdMIIdUiarR/2Fet7+SJWZo7HqAOctg2sbKpqkbQwdagMuRiB4b\n4IkIeDxcZC6iK3wDZSqJXNQ4p83lUB/CzLKkMexGZ29ctHbyTslaC6Uomcyb\nWiNre+TbC8gs5KGfi31sqHxK/CDFw+2DNvZsuy/SHkfPVnOhTw9+1OPF45SV\nShe4Kpdql1/cuqM7CPfSgiDqQrVNKYnAHnxZq99jq2cQaNELcgILLuQTp6f2\nSmkpbWGs0YgO6wK4cY5Wx/E0c/K7Lm8Zgl7d5Alg2YbHQ7CjtdAYlrZLZMcQ\nfPuVA7AvabhJ7Tv4Glcoq7+GbKQgQylH+A/u+iBv4YFJGPHdfzRqqagIYirp\nfFZyo3i0tG/iDLOstjPI7IWkivixRkKbZbRxu53fIPHHaFInRYVBpbjl9lMs\nHY6f72X2o8xFiEb3EplldoPJrz2t6R5PktAZR6YHDfhhOmMLmmvDrnO109KM\n/O5GK7fie5mTaRSZr1P9U7yc3QfhdTq0xQe8Er1IIw5odnt4NI7WLFSVCmMQ\nb7fh\r\n=EuyT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCWpk5Bvmd7xeuqRoFOf+MC7iLL5nO3o9IMik0/H2EjAIgXJgOzxf1bwdexfvVDN0NQAKjhayqmdBlZMf5Ej8M8hE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f2b9228a5b92389cd9dbeed21de8f95aaa89e059_1589920398298_0.4026197064412058"},"_hasShrinkwrap":false},"0.0.0-06a9b7b651e573686e1ad5b456949d83fcfb8c2a":{"name":"react-image","version":"0.0.0-06a9b7b651e573686e1ad5b456949d83fcfb8c2a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"06a9b7b651e573686e1ad5b456949d83fcfb8c2a","_id":"react-image@0.0.0-06a9b7b651e573686e1ad5b456949d83fcfb8c2a","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-oC58dfeeR60TokhOXH/6peNFzVd0/JihYS7P+cXtablJOXJgg1EGmB37XbLak3hkY4pYFGBT2S7ykHMcniiXcQ==","shasum":"d35fba0c6289f323b345749f465830decc96f932","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-06a9b7b651e573686e1ad5b456949d83fcfb8c2a.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEOSCRA9TVsSAnZWagAAtrgQAJxqIfe5IaoRSM4zvQr2\nJVB4lNTqgn8VhGz6pR85RR/At+y7c9JtrLnzm1aP2uE2Agnig6mS3HE/+b0K\nYXqX2sIan4W70yJB273OsMuds+HQsFEWECKMlRF0CtFFTVVq4YohbLRNce+m\npJ1vUDJ2SGypL2Kp/rMFnaLUSV3tA02xfu0wU3sc9fk2/ux4BzVz90zrKcmM\niVOX1ho1qJ9bWnghuj8upUpeLIt0jxqynV/GulXIfMD8Fe7dgQBxZaGeZ9vx\njLI/4kejy+at4Dl7/xBK9lkeOXeqEfokjzr/qqU+UIoeyLhY4Wcemb+k0h4A\nxcpsh+Gwfl7kaVHGzZlc4oGkeZhnWxVSlPtAntpeugZ3gWINKNqSbrjzhlfa\ndFu0ks4zAFo/6RXK111rUZGP+v+NPVAJhsA3CLUgY419sJKshXGll0FpgxOX\nlPO/BFpYLujmJpjuG4n+xHwIN1ir2mR+7FBGtxCHz3G+OtG4iAq1hsMLyxwi\nNncG/PMguNWAnsD4Zq94/QKXM8hewZHXnTe+3KEBwzr171bjA2fqS1OEPoI4\ngF+1uEnNQEmio5hDCov+0fx9e4m3yV3Ry8i3hzB02KVnfHh3rmJ8xmhOyODP\nFJ2DZYdMXjk/uZWN2kUtBCCUNcMxTc/ARZCx+9cEJsxxihEzN+ikWe7K6rIO\nuQvi\r\n=5U6p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYaDmIGR4qGiABk7OBKICllale7MEtMTmsPMmKKeUZyAIgKFsvIGUTHSWrt9MQPCQPdNlfrLj9weGzsRwdLwGOsZE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-06a9b7b651e573686e1ad5b456949d83fcfb8c2a_1589920658182_0.6059253385858967"},"_hasShrinkwrap":false},"4.0.0":{"name":"react-image","version":"4.0.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"gitHead":"cc03d5f88894ef9d0eb54f0f41f21ea42d1b8c30","_id":"react-image@4.0.0","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-8mhwtONmJT+dZN7Xe5Cbmm1qaSz/Dc1uFfQRNZLJ/Q15SeuyTt3ED1Fq0WWYz9qgJwvaMIDw6xnr1cJrJ0CkLQ==","shasum":"328ed515d0f5a39feb7a3f1f14709b07c9eda97a","tarball":"https://registry.npmjs.org/react-image/-/react-image-4.0.0.tgz","fileCount":20,"unpackedSize":37701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEU/CRA9TVsSAnZWagAA3xQQAKSrEnirkcpTXrhHOEgG\n9qqFGXo7+1r7cpfvHwR+lI1Gx2SokqFUw20/MV5g1i/WippPCTTkXH/D6sDD\nq2DC8eZFjOiysr5rUT3lK0aCQBgQQF6vI+Jtn7Xt3LVMCwDgm5Awil3rPbWj\n39aTMPUk5bXNdXv4fXaVvb9gs4HVtq9I/R6hEx6/PdY7EQr7cxyRboF230XT\nsna4LuAie1GZCrmTMq4DBITR34mfCjLf6LLb1dK67uPmcuXriOjPZxMU4ld/\nLBotqZa7P6Y9q/tpEOjzU3wGBa0JIjSKsmKMaoniAZ5ajbT6Uu+GrCF1iFx7\nJSjVqLNW+PCbDzP3V4ojb0QVZl/ez2VWWSfFoj//m2DGRXF7Mycn6eY8tbBV\nZ/2HLKIz20F0T3j/Sapdsj9nLgtTbmOozTbpMoHp+IAGhmr502hEmTWEX5e9\nYJSXtmPvfDXQBm9G1A3gvHVkv4xDYAV3PWadLnpZRx08NFdBi45QV3hie9QU\nMv7kKvdK/oEn/OTyKj666+sjIPH0KQGjPN+NYqKio6fuXMYsGM7JOV39dEYU\nGOyXEdptPRCVJm8FI+G7Quhbe6bM1UkHdag3ZNGpCVqSIKdX/7fKj0iOe9Tp\nZZs9aXwHLKd7MZ5aHJU0x4OcYciOgMwBHqXivf9J/+/CcZMg1qmTBpFgG5Sp\niGJz\r\n=5fu3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4cmfHmEajvMlUdIn8uJ+DbVWvbI0GgD31Nq+wu5KBLAIhAMWDSd5vtg8iBVXIl2Eo7zlbWcvMJbxGQbdUiKrTA8Sy"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_4.0.0_1589921086429_0.6605965116969545"},"_hasShrinkwrap":false},"0.0.0-cc03d5f88894ef9d0eb54f0f41f21ea42d1b8c30":{"name":"react-image","version":"0.0.0-cc03d5f88894ef9d0eb54f0f41f21ea42d1b8c30","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.2","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cc03d5f88894ef9d0eb54f0f41f21ea42d1b8c30","_id":"react-image@0.0.0-cc03d5f88894ef9d0eb54f0f41f21ea42d1b8c30","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-L/pOl1Y1X/QZgw8744YQ30saa8X86tEM8KMOf2M8cglLgSr3VCio2TyORGEPoH+0L1iOixW5svgXHEBW3EX5Lw==","shasum":"40a636ff6e006a84525e33bdfe46c537a12ed61e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cc03d5f88894ef9d0eb54f0f41f21ea42d1b8c30.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEVDCRA9TVsSAnZWagAAknYQAIWP0AsqESDsXMTJEor+\nFMG1PqKJaZcm761eh7/RN5HOm1CBkcfNcqmTcvNal91/lW56fBHqp1Ys/X6g\nB01Urc+iARTAGbupLp1Hfr4WO0xMQXVZiZEHJV2Iw/BKPYtA/ReuzDxFBTBc\nSSju3mD3X/bi4v6hRDrlvApc+a/QBUnOcFDpMEHaUZg6kivElx2zeAy0xfFT\nRvSoDIP8NvlhOHE8gDtGWF5S7iC8OY2AY73xmlcsH5kKOeXVcAZGG75+o61F\nV+791x6uWuB/ZIArq+vsgSJpWUOxLo/UDO+3cVkz71t5kFZEvUgDsDEeZyyV\nSgDcUyBgaAsrn689PmPgKebxiOz10GeWIwWdOw5jLam+J2AT/c7TDUAX2yET\nArM3XwvnD6Q5nQWoMmpjezDAIM8jGAoxRk5YVQ73XbysN4fojalwzsaGDQxK\nc4xyNEupDaD0eEZpNFV7+3AwOZPFPHMmQil8zBAeTlEz5/ferUhH6TwNAocS\nW0tzKSz7zHtjrhONP7+lxvuTLPRs8RKsou5GjW9rKJ1Vc56CVrII24HteVNI\n8S90OITzKoUGoe5yyFVRw03lezIp8UG6ascu7VeZ/8yx4Fete8vqsTHOfIzs\nAU8w/aooq1LJ51h0LPfawAga0SJdbiZgcUA7T8yVKgHUcpOLnE1p4aW223aU\nlSO9\r\n=BFY/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAiE0bqERJPd4zZZ9JKx4naQkXo1F7fkD5k9VVFvxy1nAiAILr+As0agFhoxZHUfqkbk6Jz3KBtYKu1Uu90tmsylYg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cc03d5f88894ef9d0eb54f0f41f21ea42d1b8c30_1589921091121_0.9202040904926891"},"_hasShrinkwrap":false},"0.0.0-8d96049eb2d0461afd3850653db1857ec09791bc":{"name":"react-image","version":"0.0.0-8d96049eb2d0461afd3850653db1857ec09791bc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.6.5","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8d96049eb2d0461afd3850653db1857ec09791bc","_id":"react-image@0.0.0-8d96049eb2d0461afd3850653db1857ec09791bc","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Nhy2v400GCLQW4VxvA5yAoHL077M8ZwIyXAR/sAUMoTL2s92l4fpiWRYcKByQRwTHU4SMUfybRhMKUOABVANAw==","shasum":"1c44da3cd18a142e28f615eeb85f63a42c71cce9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8d96049eb2d0461afd3850653db1857ec09791bc.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexb5ECRA9TVsSAnZWagAALz0QAI+o9lLJoQLvsmAziVdp\nwQbGEC8/LeewzGaT17+0tEUogzKNdXr5FQihipQ+f9iWDjRAwf59dOvf0tMk\nSm8bUNMQvfvCxNB6ASWH0EhJrvf/AgdCGSatbBpJ8IqUMZ0O9uFLejhE90F3\npEjfMIlcl595zNOonMxr7FASMm7ZTa4/WyiwsxHPCmEUfGTDhWgw/ZrmrtPU\naqajiZlyZ3+GnD0RlxmKVyvCA6XlfrXVCpXwmT7PkTTXgAzasywynzActV9Y\nXyz3jvPpaDUuSWd1IStQfGlAh8mRQqODwnGNjPOdjKWOzW27vLSokn2MAUwN\nsGeZwg9DGyI7EeAgO+65g8cG8fGkBdp7CQlbxMo9Xi0gDJkAr1jIrlLMGXi0\nnl0Y/GKEQjpWmT3sQ/DxmNp3OYeV9aeR29S5d7RpgtDXuB5tWst8D0o1l3LY\n5avgX29BjOLUrTtB9ZQKdmQCPscFkaBTRNNZFJ4F6OnCdn2J1u4T8CueBB7M\n3M2YYpLR+Fkn8Hs+LKLV4ZfiQsy5RN+sbhT3M0Y8crOLP4V3Em+aJ6yP86XA\nQ3zLcN69WIuoxicv//Cz0cih1jZvjYOnhkZvIVQMUDZIQdBF0mwRauogC+gK\nnWP5vp0JFpLxUpQhw/33SQa3CaZ9cCaF1/ooscCIcNxpmFxh+BQJcIJioYr4\nqDln\r\n=sLIp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsBp4q6IaNENEj4HPcsJOx0MibCV/BLqDxZRWZy8AuKAiBlSn9GB4RMzxEbZZnQ/p2JMmyukKMM3GmJJY3YjqPdbQ=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8d96049eb2d0461afd3850653db1857ec09791bc_1590017603895_0.5496065298293935"},"_hasShrinkwrap":false},"0.0.0-eeb326da38fa2deef7125fba86df600e436d3f66":{"name":"react-image","version":"0.0.0-eeb326da38fa2deef7125fba86df600e436d3f66","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"eeb326da38fa2deef7125fba86df600e436d3f66","_id":"react-image@0.0.0-eeb326da38fa2deef7125fba86df600e436d3f66","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-PVQEU1h2SkVmBZOWTLuBn7z0mWytxM9PN9qnUyZk538N8OuBZ5nao8mY9ZoqSQNu5+GIkUxh2m2h9ow3jsMcJA==","shasum":"1a3326ea43098605b859fe6139bc576e416115d8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-eeb326da38fa2deef7125fba86df600e436d3f66.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexc4ICRA9TVsSAnZWagAARAkP/1S1LGY12p5VEpN5OwpR\nqQPvSkEs1esBz5LuyS7ycCEV1JKeBrxhKfYISefpvbamxrhOwpEft/iUn0bG\nCU/8XMbxMpjq3Xwb2SD0JlXNhxSE8n2b2/SIC/Va+GFOckiNp6Z2zxnnCcz/\n9337fvdQr+XuBiqhgwuDTd1CMC1sI/SHx4RiYY6aJ2YJ/VvD9ipddhSp2C4D\nNn/QFojEb0FiT5zbwUdkOVZ8u1k4q99mRARhX2eRRbQr9ETG9aaGI8Muh+2I\ng/8P8XAuBhwjZ69s08R/WADTTsr7uNQbvWzNtOPaFZi4SyYIWFOSYrpCh78h\njWY4+p5ARtz+uWhBpYvhxLDoWHoDquPtwliqp1oNaz6lY3b1fU86aw66SaMq\nIYruHPEm7ZOh8Enun/lx+xU0Ko9+8GhcCA4t4KjrfR05sE+1eJlPlp+8581U\n0jSVZZvCDnXEPvqi4k7XWSjLwsE7S+NalAxmUOsog87LShn54i1BBeukxCaU\n+KUiZua+lmWYx+VAQuPitK2FkxmKaRSBddebWrehqLbWlwNZUnSnR8iHMd8c\nSrX5sYEjaiF7lDLgm+w05nZtyzmcC6vvSonZSy/eI7mR4S+ezs/O+ifd1bfq\nTXoZ+DGF3qN9qr5tqtvmsV8PKpyAzV6W9BJlcH7JNCH7RxjBClG8so6/6OxJ\nT3zB\r\n=rMPK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMLPHofAtcGf56QFDRYfK1wpmbL3HSRpbDCX2/VL6hOAIhAO2SnWWfDDxFNjyr4aPExiTC1nOWWf3rgxtd8vksMCFt"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-eeb326da38fa2deef7125fba86df600e436d3f66_1590021639664_0.7835632451559069"},"_hasShrinkwrap":false},"0.0.0-bb61789efa67f0703e3b35f9fa90e55d1126a4c5":{"name":"react-image","version":"0.0.0-bb61789efa67f0703e3b35f9fa90e55d1126a4c5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"bb61789efa67f0703e3b35f9fa90e55d1126a4c5","_id":"react-image@0.0.0-bb61789efa67f0703e3b35f9fa90e55d1126a4c5","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-MLwBf+rUK5WxkmwjUqgFlHW8bh+cyKBeyFSGWCWOAGpc1FgHbe5mUhdehnYQPNgr2OPFrRDguJ9eilQoW6VqzQ==","shasum":"511117da8133adabe2f33eca6487716710662299","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-bb61789efa67f0703e3b35f9fa90e55d1126a4c5.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexduxCRA9TVsSAnZWagAAUnoP/1oMXXo6yOb7PpbZDmN5\nx1ZcZnXZhKf4XvczsqBTrfkjnxmCftM5Sz70gXCMEVw/FsrB7o5xFXQc8Xcv\nwbncYzXkNNHFuRBtVhQKvdaJk6ICDJGAzDnXbG6r+Lst0B4aCEVqrY9xv76L\nK6LEMoCwrsuPawuXlJeTqxrrLKu7hB+2BGFjTpQWjQtf99LEyORIGsMaXNv8\ndbvc+75+E9+OmvPXT2DyPtPcgoYXoCrHO+uTi1DfNvuRvpmeLju3sN3uFYWZ\nWHqEwDH++l0ZczJSmiEJk3P7Q3xe3iRny2BkToqxhVYwgMh4dJ2cRR6oa4lk\n6z6gOlh/TlkyqfFUN20u2et+uZkA4hKixXZFBPt0I4NLIlCnkeM6oywNl83K\naTyvzT7qpn0IGIpmqvghbLMbbjUPFlgqzrWFd8+BhN0YG9HO7DK1xTwUnC4u\nZ0o/iZJwj2iKH+nR0Z3wn92+8Gi3MYCoLH0+grl06Lq1KJZseSjVJBmhGwXA\n+wGsaMiRIrcTEbaueOLWSgl38GcRdwkN0yRQEr2c3aYdlTpqVAuuF5brQb0N\n1PUUvo6OtXBA3c43vZFgvEBG1INH63d3gXNpV8Yi/QWgp62hS+ZR1ir/iJ2I\nN/qi5TCH3drV0nfAcLZ4jmho/1Qug6cVLz6obVxX8KVfRJa7KgcOmA35r1l+\nYeb+\r\n=RElm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbaa5+2fGeHlHKJ50oXRsl7PqLEL9EKURJDyv70p2BzgIgGEYKCmDmCxb8tsiNRRwk8yxipqZxdBeJUOrW4BqHRXE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-bb61789efa67f0703e3b35f9fa90e55d1126a4c5_1590025137052_0.3327291567318389"},"_hasShrinkwrap":false},"0.0.0-95facdd820785929306c6444ed8e4c5f53be8398":{"name":"react-image","version":"0.0.0-95facdd820785929306c6444ed8e4c5f53be8398","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"95facdd820785929306c6444ed8e4c5f53be8398","_id":"react-image@0.0.0-95facdd820785929306c6444ed8e4c5f53be8398","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-WpHxJXYEvNfF2qBzNGXsfZsjNUxNyEjhMUPtE0UbI4ipRawl3r7bhZ11QflgqF4q+RglamDP4i/JT+oKY1AqUA==","shasum":"c9c407f03e161319ecfc21307651ac4f94cc9681","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-95facdd820785929306c6444ed8e4c5f53be8398.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJex1uYCRA9TVsSAnZWagAAmkIQAKI5CvTubYvtHUuciUYl\n9eWPkmYagW4aPWw++lHCIWyOC8wxVrj+6FAmkiKtqE84eXfatgBOKbYfp4jY\nhjJK+vCcH4dJCtXVARjfEon71GTw8YYzvkuLptIrmXkNrqnQIqE89uLx7BYd\nfMXz97V1qDQOE69xC2iVXPGnuoEgib5t/35FOR5HiJK5fpYVRDfZiZYWM5Mc\naiyJ44a5jgDjlWZg1h0vZw2HRy75hpKA+3QAew2+JuPpRBjM92nnTtviHJWU\nS/y/gr3wz8niAXtnyTTPu8xBGRsvqDtvOXgxjYr4ik39kbUjMTVYosaFF7dU\nAC+NnyFebnbe1n8184k4InCmDNmDrq/xw79U+i+0LlEa7MtFfM0BiRbkc9sw\nvs2hz+p2fbDZ/Kxo1KDeZFu6lj0eNRwDnRN2wfsYYJpOyl14HgGoCl0E1wbs\n/LfiYeBGSeEJfGhBk8xknOaKmwbFOd1iBklMlv8SALfy1sk7uy5fzQd2J3rD\nftR+1lpv+3uJE+vXylwpNOwEbuOfz7a4PchT62rjPy0MnlzWaNi42l0s7IDW\npPogGNQvnrlE37n5xZSt4qgSA31IbOav2lXtben7eF70+ustN6uJTYTcALvL\nQ325jDMcHfLFJjLuI9FL2hEYNUDj+GbYwNT/gWnfRKuOSitDoDbsg3BsIMmO\n9o+T\r\n=8PY0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDcGLydAVTe0QkyjdZZOAc8yJCiQQV7Psud9Z3Ntxb1aAiAyX08uL9jCvFEVhweVjOvDzLV6VBzUgk5kHSUj8ivhSg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-95facdd820785929306c6444ed8e4c5f53be8398_1590123415797_0.2880585711318744"},"_hasShrinkwrap":false},"0.0.0-3ed8b42f51070ddabb3539cfa98ad9d86cab186a":{"name":"react-image","version":"0.0.0-3ed8b42f51070ddabb3539cfa98ad9d86cab186a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.9","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.4","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3ed8b42f51070ddabb3539cfa98ad9d86cab186a","_id":"react-image@0.0.0-3ed8b42f51070ddabb3539cfa98ad9d86cab186a","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-mXteDoRVEwRtSQKdg0SH+OpjdBTo0vuPNf0Ulg25NzHC6/Js+ve41FHjNskDs+ZCQxIa1QdlOXngvZh8hKkJWw==","shasum":"8da67358298d545f783740e3d712fbbcce088fb9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3ed8b42f51070ddabb3539cfa98ad9d86cab186a.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJey4JzCRA9TVsSAnZWagAAB+MP+wYVzrWKQm0Wm4YiugHa\nyMcbtZeCoTrY3hb3PuaNECxH545QLmOzxHlANoCu2/SncYmdSpaQIw/g3ONw\n5UQQAi2lBnPvlc7z3bdnGY4CuuwqkQNNxJ+4MuKPPNC7XbapkP7FLE2sHGwV\nVjBqyrDN8ssXDOdIIb1REFDySlnyON6QP/qSWo4oZv/aS365Dnw/rRAdCkK+\nyrvpMR4O4sHLUNp6qWhWeBSAQz+0xvhEs/3VzUS9oc2BFqFK0Qd45M6mzbXP\nczXpcPZbLjBqZ94Vxck1WGzW1ILEyZSqzwHXh/W/IyWXjhRJ6cb/R3zP6J7b\nkTrr6SP6sHRG1rQh9p8/ZTJ3AaMvoFX2LRrqqxCg2y6Za0V3bitvepIqBX7Z\nWkko0KK4JyvvsJNj9m6z+BIt8Kuk3HTGsd+31b3/1xaXbAVAw9FY708DPxV3\nfHC8LWOf+NW657EWlqYLYbBiTjKFaFP3IB7szeu+i5qp8x8givC+krpDgriP\nmMIHFUD9GT41s3o/dhkUn2wx603tcS6l/w24BPGVCm7edV1dFRnBiwphVXfz\nGsXVrFVKcYPMp/IcdwuNB+AgaHy+w6GUg5EIxnotNVw/UMYpDV6kUbAU0nNp\n9mJz2DRAYfi8DwXbIov4s18DSQUQv1NXc1vcF5mPlqm6eOPIwCV5KOWCsVv0\niU20\r\n=LkEq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0gcwdCD5zP07qt5rHU3DlWVCpP1OSsjkBezVAreJV2wIhAMIQ06/9kaIf39zwAhKAiOSHjETSWXEkWUA6ufbzLhss"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3ed8b42f51070ddabb3539cfa98ad9d86cab186a_1590395506543_0.8152442147452796"},"_hasShrinkwrap":false},"0.0.0-9569374147393627af58c7a3df1dc29f434bf017":{"name":"react-image","version":"0.0.0-9569374147393627af58c7a3df1dc29f434bf017","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-object-rest-spread":"7.9.6","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@babel/preset-typescript":"7.9.0","@babel/runtime":"7.9.6","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.9","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9569374147393627af58c7a3df1dc29f434bf017","_id":"react-image@0.0.0-9569374147393627af58c7a3df1dc29f434bf017","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-dJ3NgoVSnuVdoqUh17BKF8cDyy4qkOsD2GlRB7QPB1q+v5HjFoaP9w3ILFgzmDHtTIMfkY/YjZF7nXvl159mVQ==","shasum":"fa1b0034a2d4c52b6ba75562713d8c866b908673","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9569374147393627af58c7a3df1dc29f434bf017.tgz","fileCount":20,"unpackedSize":37742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezRDQCRA9TVsSAnZWagAAucgQAJoHKBTUeED45/eOyeev\niyzvLNpNBValC2TIdocSk1DY8aTnwVkrR6nYJUwgAmN0DrEaV6cDmRESKy2H\n4ElPD5Iq20px9E8xwVw8mZHyJhqTVuM574LeukDlDVk/VaeRBeXeaDYZ4Ww0\nAvMjOPkvF70guc6I4xsUOuIrhEXkNMrN0jgbHTgX9OLtMjWvyTu7dg1N0Zp7\nf+FXV3kT3DURx9Zm4az38peRr6PRNguFPsZT92Y57p+9O+Wgid94QtT7cdKv\niB+I28DrEpAEgWjmu3hPapEeRUFfsmxz+AR+RSmGVK5xou6FMVOUL7+1sdl4\njl/znMUxqdkcumppvxGOFscvLq5YvDcHwk02jcmmRj0KM737xxaMZoSR+q0h\nGdNjv37UXYNoqm1vpixGoAFATEPjDtoYF5UYkjVaEEWEQpHRvCoDbFzphq6V\nEdaibUGnXn9/NTiwxUte0CDw0pCKCbHZauCEddRvfkabLs/LzpNaGg7EXGxd\nP+y3yge6iNlJqapIcnHpD/hp4IQ1+w9UOQdqvO0KJVpRVz9CgyDW+0dy51Le\nuuMMP17SxrsWE6RbfO0Z5gyGLg/gHrgJECbmIItGT5ORz3xhABtTs7anGGv0\na8txj3DsfhgKq6NPnPoGLVHU/m0G+7U0pZZc/OZ/ZEpKm5Bqq1SDpHGS90RG\n4+05\r\n=eW3y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6wRxyfP9t7oJfNTTzkGU48WDdV88oWyf4VrscW6UsJgIhAN6Y0R0qLZFVwh0KqEr3SQ+nN/Zb3qrylKp5XUXMCQWt"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9569374147393627af58c7a3df1dc29f434bf017_1590497487962_0.329690361679978"},"_hasShrinkwrap":false},"0.0.0-4e7282e6768ebdfe73f2952ab186e792bd0825fc":{"name":"react-image","version":"0.0.0-4e7282e6768ebdfe73f2952ab186e792bd0825fc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.1","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.1","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.1","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.10.9","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4e7282e6768ebdfe73f2952ab186e792bd0825fc","_id":"react-image@0.0.0-4e7282e6768ebdfe73f2952ab186e792bd0825fc","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-tYsxxlxGT/S67BhD9RgQhwOmJv4hXJ4ZXM5IwctZl/JwwhJwOhVF8n4UoseNFTtuXQTervOdJhUkQDprME254w==","shasum":"643fca83c58a4a28862db12906b40bb60b9cb57d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4e7282e6768ebdfe73f2952ab186e792bd0825fc.tgz","fileCount":20,"unpackedSize":37779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0GcQCRA9TVsSAnZWagAAe/EQAIg2CNdH/iqBEtkurKnt\nVlrITWWnVd/U403ZJZRygkHXMMi6k75ZITajJYFP4iJiFDJwJU0sE5Mqw9bv\nFrJPrU9V9+LFNXq9yGZ/dx8vUUnL4BActrtq+I7YJgNqTR778DBCCaUNTS8v\n7POPJeb3xOomek56Dq0KdthViQHPxzKrn56EZT3NLDyZ3SNvRnhWM+9sPhq2\nb/lyHLy9riFz3dqzFaitEoE9FChjdssBNsNlA+VyOrFNO3s1/t4C/yBsyw+A\nMdvAXUcjPe7fVUxFhMZ/f8A+Ssheq5eMyQfU8cd0EiKHQnLZADu3GxQgFjq4\n/LtjXefF8fmVwNdGKh4FYD/8ox9TaJA43g3V6e3puABIG6dJobwQNaKwfeCZ\ny5f2ZFjN9w9YHZvZLreQF6y9Mdx3ro+1I3KTp8O3AqYzqOFJh3nyb/jcbK6/\npS+Qi5d1lcIRC8pzWS/u8gNMoVe08PjeniLbY/CrS6vWJIe8bI0JAxTnIHAT\nqH5h4fHe04vdpT6wZvknD342ka5LMDTqmok5PsQVZpJ2ya0J37Kx6dmB2vvX\n/NfrL41QE7AoXqxjhxKqLcz0myu9e0xlB7tjaRpup3H+OwqeG67HSfoVPseg\nApaWYn3cGKrTer44QWXAu1Q2PIAQZYdjC6GbK+H68FjJSzumvLH31QQrGO95\n/NGJ\r\n=Bv/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChCFUBC/yT8bi0kJPiWVLgygXQC+i0l1lTObc3v6s3ZgIhAIKomZ9u/hin2GSAb+dVP6uwOE1I6SdWfTT7X+fbBiDw"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4e7282e6768ebdfe73f2952ab186e792bd0825fc_1590716175875_0.690727506142625"},"_hasShrinkwrap":false},"0.0.0-4f07d8336b307e407ae58d56f64e0448f2f32129":{"name":"react-image","version":"0.0.0-4f07d8336b307e407ae58d56f64e0448f2f32129","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.1","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.1","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.1","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.11.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4f07d8336b307e407ae58d56f64e0448f2f32129","_id":"react-image@0.0.0-4f07d8336b307e407ae58d56f64e0448f2f32129","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-YbEuN1fos4fqWGLaSawuVQ87FOaL5oYwqpT/x/Tf8rwFGoBP+QIDQpXzpodo5Li6UP55efGMIRBX2eCpK8PRkQ==","shasum":"fc97485c6216622d48116cbd80bd5fd135eb2971","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4f07d8336b307e407ae58d56f64e0448f2f32129.tgz","fileCount":20,"unpackedSize":37779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ejBCRA9TVsSAnZWagAAgdwP/1m01qgXzn0cnqoMAybf\nLR3Z1WDPnT8o7ecK8N5KZub/EWRggmbaZ8AUHkiQfUt2H2riUSc9uqOOQgEN\nGYEyTejEOQtUQqE2hwoRxFZ756PPQ0gBtAlUZMTrdMNTFBoKL3HqWI3PBBqT\n3Z32c4d9+okMT9Uwdmger399BuqQrWAFPflzLNzt6Kd2uIDrSfJoKQS0Jpfh\n8ebIKYthe2XpGYXjgLrxgcintF/8ycaGhQESG3LNbnVFYvDPdja89QYD2DCv\nSA+5icIwoLFe9w0tDlg2kGFksdxYwbF5MxYqMYPlKexH88RinTbQH/o6ps8H\nveR6IwXBQ4wftt3x8q3IE+2NMNgPra0lddmtFvc1Zv4LSbJ60VkfsVyRfFcw\nTvseSC8UDu4RlPWr3zvt1lgi0t+k2bIM4HxB+Gs9ToSuUV4tl4PHIrnkEWtH\nupdAZTePzMO6+wV3pP/bXrCSyjk30K4nEj8qW/w3kFByWDv+2zB7kCoyPeNa\nFA31AIeUDqDsI4mB0GnLK7VfE/67Zz1DFZ1cVsam4SHZJHrlPZ+mdtnYSI6M\njyGd2AM+YVxJv6jes064V2HZww4Os/cKHkrbyZB6HtG3I67pTAAsYMEVj6Az\nRgaKJYKNexTj0QCmjJoQi4/1uRAI4fqBupUW9ZBOI5sWQ6/2i1iQFtpuxOYq\nCd0Q\r\n=v8tg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvknpe9Zx/6FS5uEzS7glPn5TvnVX3tnP9vHfO/AtTvgIhAKZ8wFLq25QP+kJRlelR5sZCoBHnmcO94LootMK3BPfx"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4f07d8336b307e407ae58d56f64e0448f2f32129_1590814912947_0.09907795635915195"},"_hasShrinkwrap":false},"4.0.1":{"name":"react-image","version":"4.0.1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.1","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.1","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.1","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.11.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"gitHead":"30e5ec5278691295a548d3c1617ad9e033627bd4","_id":"react-image@4.0.1","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-B80I1UQU6XHJ5ZrQrmD6ADc5GrBlpXRsmcgBgwwJnfYflynkZ5NBrLBR+yt3zlDp6qlelxrBnF0ChpOwdgYiEA==","shasum":"e85a9c5ca11c84c59098dc0db3f5fabb05aacc50","tarball":"https://registry.npmjs.org/react-image/-/react-image-4.0.1.tgz","fileCount":20,"unpackedSize":37840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0z2ICRA9TVsSAnZWagAA90sP/3vvcKaNnXJ47954juox\njasXT8VS6beXHsyVVDoEfg692x/Oe60vJSwiJQ+wlIjfZrU7wPCySSir3XIZ\nb1iLnQGK1vEGgbK4SlhHaqnZJAnobQYaNy0RvuUXJmSo4LIxkiSANmlZSuY3\n92tfzY8ncrlwTkdCz1+4DgYlueStTgZNpCDpmAthcZi7RQVWeLcTQ09xfSmk\nqCazpNNqJ1wyyDViPch90hpcSKXmod4jMNX0PElF2Tye/vP9NKGfw//2JxPd\ngMotnSoB3HFVGn41zyFR9HBNkJ66PEXQAWuawYbkKthXX6qS2mll1AksWmSU\nqrjQqwRlma3m+3Llj66DC//HezVX+k77hrSyiw257x9JhRG6Q3A9KlcWtpsu\nPfCw5X7hKPr3/m9IA0BTywUuApuOHCVkc4CFuDqxhs/ETNuAIHOG+xNBIIrD\nq0H+5+QZWuYdHtxtJxHKb/+7cDMWQxN02Rs9ctTzIiE+aivyWEm8ccYJMKb+\nqPiFhWl/1pAKdkiqP5jTR53otrF4yL3uRCHyAtdZOUAuSRuI5HqlvrL3cko7\nwB5db9tjuyyFoNDGhFWlqGPxsyyD6msyipG/RJAWdNKlyo+qRwENrHr4zFrP\ngrCmpYtON8Q+Z/CTcPqDpBkloiYvX6i3dU0rXA/XEDA3xc3wS55ZuwzcZ6AC\ncSRh\r\n=inup\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZAih4ytPfoVAO5MgLZa3rhxRtVaZRfDIB2NAVlqKVLgIhAJRBcveGuCJNd36wUKY7WOMsrsViBGYsg93vxeNGrbcS"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_4.0.1_1590902151059_0.21704513404307835"},"_hasShrinkwrap":false},"0.0.0-30e5ec5278691295a548d3c1617ad9e033627bd4":{"name":"react-image","version":"0.0.0-30e5ec5278691295a548d3c1617ad9e033627bd4","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.1","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.1","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.1","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.11.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"30e5ec5278691295a548d3c1617ad9e033627bd4","_id":"react-image@0.0.0-30e5ec5278691295a548d3c1617ad9e033627bd4","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-DyeYgVk/Lt82qMv/vJsEflWgGrMDKW0b/oMFf/0s5vRb5hvvFu8tu8efpBDYGBanZLxboT9GHmAhovq2OiKdsg==","shasum":"fe60ef2178acec39e304691f3ad193ee656ab6e4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-30e5ec5278691295a548d3c1617ad9e033627bd4.tgz","fileCount":20,"unpackedSize":37881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0z2MCRA9TVsSAnZWagAAduoP/1uVi8WcPEA0lVNLPmmf\nD2IDWXj+pvfp0DJ+4JA8VMYQYbJDt3cHYaGgYwa/bXECp/rfzEz/P+6sknD/\nXKQG40g/49E/W/wWCI66nM/IITiMVHs7XaNOw88tkYGP4FBJh5PYp9bYt6S+\nJJ0NGf5xvbpACJa694g343YE+2UkYeT8F6WNHN+P4JIHnHjXL5cV9D/hPvSN\nglT4odwHtFASHwqVLD2ioRjVpZMnHHyG03NRbued3L+KmyrpsjBPEo3xnDBL\n2m6k6Z9UCmLIwyeuthsu83EcjePtGGsNk0FlJklW8UWyfkDS6w4ASJwOaoBa\nhMKZHNCQs/I5BYU22Kb0rjTQwEUL2/iiO6S+k/0jyfY8bd+UZYb9XGhUUvlr\n/SpZzpl1fnox4hUexN22dQm4iFHdcXjAHOEo4sR/bBCgJk2ijALCK2veVFW2\nj4870V7qfQUtQyB72We25yNRsQeYlcKu8i4mQ+NwfsJDmY+Fl5xxMABhyZZp\njLdITybYakLdLRMf4GCIWp8Ntf8FJQpSw3Em9xI0+PtGq9DbIXSoNHn+igUw\nAzphCigXCtwZYW1fxF3SOG2MrnoYVvoSeHVHHhf68B7gY5snliV5AQ1E/nA9\nMAinnVZS6Zdu3sP8RhFCht8Kpy4CKF7yd5doFMMBFBwD2zhdvG0SwSWJT/31\n57fX\r\n=4pKH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4/Sw2nGtYwvZPv+plfdG/6+iFAczYATAQk8HmlMxfaAiBVAr68CjTLe7Lm+3O1Gzn8q78+4OXZKGowNv2LGzpwMQ=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-30e5ec5278691295a548d3c1617ad9e033627bd4_1590902155854_0.9392666794957327"},"_hasShrinkwrap":false},"0.0.0-3b911b112ec2b368a9b175303eeaa2e401aba799":{"name":"react-image","version":"0.0.0-3b911b112ec2b368a9b175303eeaa2e401aba799","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.11.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3b911b112ec2b368a9b175303eeaa2e401aba799","_id":"react-image@0.0.0-3b911b112ec2b368a9b175303eeaa2e401aba799","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-MvRnXMXETbARjm8WWpu2DT69KPzIlYghZUMMAZG6ylMXUW6PLJnFIScVlRfuRtm0ZS9kv7OQ1gVK3ktp/ErkVA==","shasum":"e04087d7ab4589980dcc2fdbc86cc36420b02123","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3b911b112ec2b368a9b175303eeaa2e401aba799.tgz","fileCount":20,"unpackedSize":37881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1MoQCRA9TVsSAnZWagAApN4P/Ah1qOeKwu27E/k+qy0V\nEFN/7rgN/O168zaSbMv8NPUQ1oXfhCrB6q4KrlWnQ8sDtwce8syETVWg5EKR\nzR+RY4zTFasnkdhRldO9LPe9fxBFD2A0sBj6MGrfCvzWsyZ8HrvlQTcVcVIb\nK6CwcRDMwlPE79ufOORt7O/9gaLWEC+tIUF8OI1fJtJ0uRmuvBODKNUStpX6\ntHLWCg9PcQjCt7i+CVg/eidd08hy5QXlJARKBoS7gJsx57WcVPRkSzNotoRW\nowDF6/nUZmGMZjWRSKHXlfPuHWJfGynpAp2RU5kPvWRoORgAfBw+9fb7dinb\nDogQEUalCj3hMUYjlHUH/qfTtgtb8MyrEMZrNVbm0/oYkTjuj0T5HrCS7jEf\nYHYdjrknbwLVhoqkgnY+eCWb5/d3J4JtLMjx+fEw6i9Ne02Vx1Pg6vw665US\nHUcMRrHdXSawZOOLSAYX0fIU5xbiVkAsbW5+WbWToqpmLoiOARI07uMwijSP\nhVyEfW9S1bhnMVVfGLV/TEbdjc94QRtoaucCkj+CIf51owOb4JzYm1BGny1b\nW9tp4VU2CHaNby+i5IK/UaVaRUqkVp5FmXPIvWZpMjLYbq4LyQH08KZb0Bj9\nPhMj4ofmwBw3qjuPkn++/cQbofvD5cf+WX7J1WxKYYs/erLxEm02evdEyxiw\nWEIH\r\n=hTrt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC93o354j2hAl70ELxAo61x/G6PK4TUCx4K2hKopspy0wIhAM6PHGekjc9CkXcqofxySvlFxcQY9D/JEws3Xo7J+xS5"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3b911b112ec2b368a9b175303eeaa2e401aba799_1591003663803_0.8464372741728885"},"_hasShrinkwrap":false},"0.0.0-44dbc0ca601f6a00c6806a8b111e69ff599557a3":{"name":"react-image","version":"0.0.0-44dbc0ca601f6a00c6806a8b111e69ff599557a3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.12.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.0.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"44dbc0ca601f6a00c6806a8b111e69ff599557a3","_id":"react-image@0.0.0-44dbc0ca601f6a00c6806a8b111e69ff599557a3","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-jCJbFlaKiDNe74NMri2jlvrIpAm/DhE1xEml5y4hpLayAmeOtVn8NCJkq2gIZSC9DdfIhPvdVCbEbFFk3XAhpQ==","shasum":"f2c8e2ec635a1c2842a264a37bf5f63359e5cf21","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-44dbc0ca601f6a00c6806a8b111e69ff599557a3.tgz","fileCount":20,"unpackedSize":37881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1N/0CRA9TVsSAnZWagAAIxIP/Rw3nOJGv6qSshLPeX3i\nhju2PS9FYEPcWS/czzUU9Uq5/8B+RbaUkGoHKng1GEA4wK9FSj5uyAPU965w\nA0Nx2tDkHr+ayvu/P7p2Z5hQkRzdJCsdA8eaj8pU7POjqJ43N/sAry5ecfUI\nRjNnFegWiEc/nwQR7SwIjAjIBMDSFw9fK+etbBqalwnDgcL94quQsHmf9erd\nfCDVuY9U1QyrhHALgCYiNH3e2Jsw01+1L25+sS/IB5lssRhKuwCHvXUA8nZl\ntu6yHS5dnhwPn5sqJZb8GOS5uzKSqKOVXC8wUQGSN8N99tEryxYkq5HqxCxd\ng4t6BgJs0iytNsXYeEq1uyGf01gGchoahAF6Trjc7nKWfLX43waAV7Sn5Yze\nlGi2fJhxytfVN4jwdN3guZ2apkoex1tynKwCeXBHSMYyhDGc+H70+EG/YfG0\nl+8C52rIxBftvzn38txc58J8clMMC9zF42ZBIjBuSu7R8skgdeGGk2tBOpiy\nITY5zfjM7Lu4SB3f8aVHf0EZKDnBuneY8NPPnyv3GnUymkYVdFVJtlqmhdto\nqYl9+ViNiW5GbAFnhtXtkEYYS7H3KScxcTFmx1Ox/05PpH7wwvhbrU+PyRDq\nwZKbd+cDl86dmjGBH9IIYRfX394O1wBi6ahyQDsW5U++eb8RYxe3JzDpMqGN\nibAK\r\n=Ku/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPsD3WcHtV6+QTegZ3kjZaN8YXgLaQOrElGRRu0ai7gAiEA00h7OGB6OBN66E+Q7GdbJ/Mnql+A0e5daP5R5hSFs8Y="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-44dbc0ca601f6a00c6806a8b111e69ff599557a3_1591009268409_0.9425172444388414"},"_hasShrinkwrap":false},"0.0.0-ad884a93c04bf7000b837a6bb6b03a66ab900564":{"name":"react-image","version":"0.0.0-ad884a93c04bf7000b837a6bb6b03a66ab900564","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.12.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react-image'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponenet() {\n  return (\n    <Suspsense>\n      <MyImageComponent />\n    </Suspsense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ad884a93c04bf7000b837a6bb6b03a66ab900564","_id":"react-image@0.0.0-ad884a93c04bf7000b837a6bb6b03a66ab900564","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-C3Q/sw/zGjzrC0L2p8drL7Fzh6nYXyGFDot6ex9AutQIh20M95xDmMfBwSYfLhvpRXswdF7yz4cEogo8dHsVkQ==","shasum":"375cbe071a634df0621ad81da0252103cda8dbbc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ad884a93c04bf7000b837a6bb6b03a66ab900564.tgz","fileCount":20,"unpackedSize":37881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1PolCRA9TVsSAnZWagAAc5MP/RXrSrFMOGyqVAkY7Ul9\nM573IzxRdN6ESGHtxsQUl0HJ+KkmugFj9OCUSRP56nlRpXdZ6/Vh9rGoGXaV\noNNlyQnikORMKbODXnKO1CLJ+hUnRhs9zHEd7xgo4/gKxQvlpPEAWEGUJrjK\nkASrHxR7Ser9BOreaumcXZf41GF0bnj7SVXE3ORDGpf1o/+uBfBkO5gqxH/z\nu2oDopkic1s2bbP7jWuToks/b/hccU0qNNO6XecRnZZW61Edz7CMouR8eNat\nslJ4W/F6PBbP9dWmi6uwaiPxSMYl/IXzZOE2XHOeqBOVaaPUrwIciTRC9FE+\nOvcHkwiBNRcMajiDxaTxorAO/IAQopltJycx99AK2bBRPZBjmlKJPZvN9MoC\nPpPDarhRFhtBCbEuxie67ON44R76TvdCKQNmG5SNTOU1/xur+Njj/p29Gz+X\n2nvJX348rCezWUaLzHLvgDBaB64I5Pl4AJmIbynpJGvWz/SOhpXyM4XJ5G9D\nNunEqF0NpZ7DGincl5/RIjulT0eTO9w64+VbvOvQJNi5INeh2AgShcEt0ePU\nXNcuSNFq8PEGeJdA4r4wdgBtIuNMHA8i5TBS+dPDlzkLuyEdAtQUHSbz1AKw\nHPE+50Hrmh2Fn/3Ak5ZNDCMzBGUbI2SPMttpnRvEdsrEKS/z2dUWZJhFfeAb\nOxiW\r\n=Gy5n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELQ5MYRzZBL4o41BvQBmPAqlS5i5fCEuWIWpx1BLPWZAiA3bniaFIFDgecOOWhk91aAe8c0NLtj0sPgmjHLdFxVvg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ad884a93c04bf7000b837a6bb6b03a66ab900564_1591015972451_0.8556692948253022"},"_hasShrinkwrap":false},"0.0.0-42be500666eb994bcb2d5e0a82a1289432c734d9":{"name":"react-image","version":"0.0.0-42be500666eb994bcb2d5e0a82a1289432c734d9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.12.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"42be500666eb994bcb2d5e0a82a1289432c734d9","_id":"react-image@0.0.0-42be500666eb994bcb2d5e0a82a1289432c734d9","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-8cBlZVtvUzOmjHNhVFAcTL8FTpJX8Y1xCudHpEb+kx++9HADZp2XVs+kK8RfbbQf7G/qwMEQp9RWQGrN67nrag==","shasum":"103597d27ab68e1cb5435fa2b13aec05b3534a49","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-42be500666eb994bcb2d5e0a82a1289432c734d9.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18hjCRA9TVsSAnZWagAAIIQP/1M0VGun4jjmaDd3QxPO\nJffHKr5bXti1pAyMWWHcxB05iX3s0GOeySX7A8ZwkL12+4xP/pQA/RZCyTUB\nj3oVXokN0kYHM+ImhZWr/HNTeAhZ8Fly2SM8acadjPR27Yn96lk1qik48woI\naLiYuuGM9vljVNRtMmlGwgmlUe8kXsHEn2ei6OvcNvU0p36jg/uxKX+eJnVC\nJR671qEAdrcY7ew44cXhcFieofya6UHZIBCudujEkAjDZ+F/eafRxlgaZVyY\nQMeKlTckI2PQHEv1MHpmkClcF3Xee9XG9z6eiHI1JETlFMnVSOLzptMcJBXn\nYkxIRW43uEh4oe6o7uHxKfPmqmT/rdoAAHIhnqoNShlqNub2MSVU7Csgp5fp\ngSZrY3d/sn5ltSHcLusf/PK5aBJY54xwzQSKyeJ3xFNU0I40TR0K8d66LlJx\nmw51Sownp7yOXnaeAcycqM22Des5g6n/lBLz4wjbDVXw+gwYvA/PTIGcGcqQ\nDBby56tiwfDwcLKJXSYl5GNsIkCF0bhBpMO9/Bo5CzgUHspn6xznyDJi9sSR\nlYHtQdghRodASm0h5KQ0Ai1ArJnM8THo2g4kaeDqfqIcPNi1ffq8uBEMTx2P\nJWoegKaA6CAGhdv4dExmi+vtg0WP3d39mgYHcTbu1+0M9Mtpct0dZXNYr/++\nhaAZ\r\n=7r8Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDms+CkTgiykDK/DFTztW9OvOEmwePl7U93+U2T0dHuGQIhAO7O/79v8wV/hAPE9afjEBzSNddfzb9y1p7iVP0YvYBM"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-42be500666eb994bcb2d5e0a82a1289432c734d9_1591199842757_0.08266158064216578"},"_hasShrinkwrap":false},"0.0.0-ffe959bb365e4b367a4af9e35906d8fcb7cfe2a6":{"name":"react-image","version":"0.0.0-ffe959bb365e4b367a4af9e35906d8fcb7cfe2a6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.13.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ffe959bb365e4b367a4af9e35906d8fcb7cfe2a6","_id":"react-image@0.0.0-ffe959bb365e4b367a4af9e35906d8fcb7cfe2a6","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-n/mfcXlFAcifLvu41lcMMkigbeMeu4Nwk94KfXq07G194YAa3JRt4wq5Ym53B0fM8AOzNC597S8boPptzCaDnw==","shasum":"7891ecc1cf0714453d8225b2256b0ce90390fb00","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ffe959bb365e4b367a4af9e35906d8fcb7cfe2a6.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2er1CRA9TVsSAnZWagAAzSgP/1OZCLjvIyc1PrnBH8mc\n0EMxBkgg4HtgmJUc3CjqxCu5NIXKxU6zz040KcXBhYRZNsDipTuT58TKjTsb\nLD+R1Q1UIBd27FTW8ICJxt621Jj6qoXnOhlSsikiG011J/4RjplZLR+R3RMt\nLtkFeNdzKDpPFOEgh1bG2LZejZabkzKC/9heHJNL690jZB321lfA1Hemx6Td\nWWVtNyEv3UiXVUme6VZUr5eM9N6WD1a6p33RbIyy7zYIAvTnPAOvFhbm5B3X\nNRdeW8rfuSr4pgFDTG+DUxRmettpah5hyYRZ7kDD91JWbBqWw3gD1Hv+Pbnf\nIPkD/oeA5v339dOEz7rHRQ8fXl5t6aOWGWljLqJ3h0qE0BhqomwLzAIci+8/\nAaNKdEmw/J0NQ2OSwMLVcxr4+FDAykwIUVTYwslLCNzUvSdhfXMenORM5pYR\nK0Bd3tDGUoP10MktcHspnRr3i+9MZfbxXKerMsVLh9fF4STP/21g+kK92rf/\na/XeWO3wqgiBQuapWbFMsmWrBFeAP4i1qAYjOGWEp5YEkXsAIrgh2hW+Lm3Y\nqj2fl+ggpvRqTnqM0ec05ItqYxZZBRRIW6XeSRWwM84B+Z7eFMb8nZoJeyLH\nIr/PvfWtDHnyWDp930Vx6646lFgNyWu1KZtlH6vCOtULKl5UTQEL8Pma8blN\n4lqq\r\n=r1Sk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELFZ/h6z3m4C82NQpBbVeA6vHi3WE//mLnOtBgPla+6AiAWZNxa8ZSlVZAoOBLRQCCXOn+IYZo4QRfsG0pfIMdJpw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ffe959bb365e4b367a4af9e35906d8fcb7cfe2a6_1591339765341_0.746625477322008"},"_hasShrinkwrap":false},"0.0.0-1e281bab575d9b288f1b37305da3a3d8cbeddda3":{"name":"react-image","version":"0.0.0-1e281bab575d9b288f1b37305da3a3d8cbeddda3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.0.4","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.13.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1e281bab575d9b288f1b37305da3a3d8cbeddda3","_id":"react-image@0.0.0-1e281bab575d9b288f1b37305da3a3d8cbeddda3","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-6yW/HFniDLO3AJ1wWJc+Gs64/ByW8OSKTchGLZL1/nhFTaGxRfRNQJ1Vw5lzX430OOwGV3WVe2aqm7jk6XaA7g==","shasum":"506f2614574e18a791daf3b01c0a2aa779c3cac2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1e281bab575d9b288f1b37305da3a3d8cbeddda3.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe22EkCRA9TVsSAnZWagAA0BMP/RqbYQTXiyG4mTULI5vT\nm306VKbsu6q4J9dcEe5s1g0PTHpDgkxDUliC9Gt2Nr7/YF8GwkGodDZnrsbT\nqOcJYxQEQMyAwWdjmF+7wqYcMKYD7P1OPVDq2R6ijcsueBzQDmD+coaFmCyp\nXxYbDMonZ4KYUQhOWGWUCZBNz2TElrXicoS/tGqSgFYZUXJOsJNBpgDw8EGt\nVcCW1WtZkvntAd81BjQHFpDg0u9wr46PQ+dioxjXQm4vPEn4kxwzwa3+I2xS\nZ1O9RG+NJBL0wVwtMASeLOq+N4r1JAy7O2qZ5ww8f2+TM5FNOhrm5H6CEMrF\n9GLFrbA9w1Gut02+gXmxeYOtHqCNdhDFEJTw1aXsWownP3rL0WPnVgnA4MCb\n5F8Ltw11t5DlzfBGf5/v4G+ws70EQx4GIGH3CuYP0l7FERqrNrZGfTBsaHSf\n7cSXHYXQ/0HudZj4B4jqQUOp2BCkAQ7aSd2OVs6PnhLM7LRiRI3ccdJG2ef6\nF3oCE2b81l8kCfFelHhBH14rGyC4/rXQU3sZE49GyjsATyXEVbZQt37mr5Yv\nW16z94THttiyhPQATxuApN7utTnVfiZfFhGMLugjhMhK6XC8utLTZDlbV/IU\npowPG9BFyNJOsTWrJbNol/WKpVNkGMSRbnUHDaq2PlMnH7zXGLaffhLTyFvQ\nE+Qb\r\n=mu6S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXuciuczvLjLli/TadRLv6bmCZ8Uj6fkot6TbOtKwUBAiEAnZfpOSS6heNW0bG8wRmPuU1FK/5XyFcAwfmyi7htKYY="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1e281bab575d9b288f1b37305da3a3d8cbeddda3_1591435556179_0.5368596665800838"},"_hasShrinkwrap":false},"0.0.0-4b1461adce9025d3a6a2afd2047937894ecc4c99":{"name":"react-image","version":"0.0.0-4b1461adce9025d3a6a2afd2047937894ecc4c99","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.2.1","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.13.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4b1461adce9025d3a6a2afd2047937894ecc4c99","_id":"react-image@0.0.0-4b1461adce9025d3a6a2afd2047937894ecc4c99","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-lpPF2FjPoj8oH9sTFj97coSy3Zgvcc+SwQ7Nyu06Cct8pLVsJSQ2BjjXaw3YAbQ6zSZeQFiWOfmUFFFXWTmdxw==","shasum":"855c4e6d1205b2cbc2a11e11ad8def02e8f1a016","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4b1461adce9025d3a6a2afd2047937894ecc4c99.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3MgFCRA9TVsSAnZWagAAqWwP/iW/ig2Cn1bRGebvnFHH\nDLm5+A9DtChtOIA0Oi/agZ33VTXW7rGa8aubKcOxuVJezMbl06qg9u+o9dZ+\npO8fXAUstoIWKDX4imLO6crg3f9U1fMeknhCgV3x9LlsD8FIDJUWgQ2ljUIE\nKtUvV6GF4fBzsPlK7638WvPQBL3RYN2fTiKkzhnzaQDCytlEvUZ38AK1tPTc\nkdQdlJ2A5wrJpHx3UIx9YqPnYRQVtc0RvwH0AvegcB7I++Mxhu2wpzC5fRiI\n7vyxfRDhPKne88lXkUzMNygQ4EVreYNxSZmy1/NX+2uzYLQKIkkPoakck/yG\nKZUER433NZPScQJRPtF9WnbtQe7hGSu9LQ/0UM2RLvFg3+BCuESJFZ725Su9\nWLD+DLjNN93S2OScDraMVT33JoVN8uPl7t8lJcZ2nqQ2YzDeEhYqRmwi3Kho\n2CbR2KN+SGqi9ddyTMQSDRpBJRDw22Cj7kG35v06XWEfDETXc02M5Ju0V/XX\nwWbYR4DqCgN4Rc4OnX2saE1+Tem7J9mE107dG7dLO3bK4HJJNt/2NmR8hGuK\npxgRtBc396rPFVN3AjzQl7ujujoBdXW5rQlTKeHalVYUDMIKFE0I4rtiuHZh\n16KnThEgf1aJKrLDJertVqStyPnYTa00O3KxcZGL9C4GZAUUX8nHorl369Up\ndGvG\r\n=9oCg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4b69+XKHB6ZXTkxhAk6TQpGlWciVs+7+66JnB+e/KYAiBhuxow3ETFhB0KX3hxD65KvKbm1WywA0ANUh6zZJka+g=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4b1461adce9025d3a6a2afd2047937894ecc4c99_1591527429311_0.8740263365513128"},"_hasShrinkwrap":false},"0.0.0-208436379c9997ff563ba0775624ad7ca3814906":{"name":"react-image","version":"0.0.0-208436379c9997ff563ba0775624ad7ca3814906","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.2.1","@types/jest":"25.2.3","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.15.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"208436379c9997ff563ba0775624ad7ca3814906","_id":"react-image@0.0.0-208436379c9997ff563ba0775624ad7ca3814906","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-g9om4S1BzRhpuQ5I196V/POHdFmqgN0T9KW3kgpFW7QWjWsz9+UBcCU+5X0Nfmb+7HOggxQDTqtCe1KF6pos0Q==","shasum":"d1f974e5c7bc3668954375bd7973136f4ef7c20b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-208436379c9997ff563ba0775624ad7ca3814906.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3zqxCRA9TVsSAnZWagAAnWcP/3pqTFA+w1ZLdWLosAO4\n+AgeqsAffKtS3Rp0YnMM3FfB7BsFYudBZdUeSrMxdqms+vqfhDw3uC7N0vGN\nTvE5aGMC5OkzYup51hIELgWcHzifHCXx3GXNKv5Sxe7rLUJgJnxInyFayqaR\nS9O5TVcFHkYPdg+mJLhZ2A/pPfRkGGEW5SCw5M4so6nuvK9h4IA7VDkd14Xh\nm0CzImGV0bAlAOdehO7W3NFU3YGmmgahPqJLO7AjpDD9aLzNxhYJyYfVzTbu\newTOf8hqsC879w2vI/hQNexFGNI2YWK6V3tlOauzO1J8cT4N8cYXRbaZxtuz\njBP5o2h1UzyU+oHcaCibYjPOk1teNvEjHs6mH9X7psD2UB8gjqq7C6Vrkbiv\nTVVdM9/ngjq6+ObP5LvRtWBiWLup0Dg70VlZKJrLlv96LxH63Yed9ipoaPg5\nDP/d4aGhX3qzrRtIzp+XG4C60A9/UBwsvpP3B0WwbJ2NN5F6p0gGh3Jo7rT8\n9psIW7K02l9uNJ4UJ0rp+XXRbI4gckbid84zNHt+ElwUjjsCgXYpQtz8/S8q\neIpiyOCqqqaIMUUwzoajhLY4JQQn6LXvWuXQB+MdwAb9pLlVlhYf2d+QE4NN\nIYS33ao1FcJNKMswvKl5sNnq9VF++FA/S3bmIai9uJUql0XtBDCB8Rw4O7QQ\ngjA8\r\n=Fics\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpxKAJihL6MoYnctESA2EY5xR7EX5sGaVpUHb8XoJV8AiBREfxjN7RcjdtSLs+TUqwdeVN2PAzN5VE/MkSVpUKJog=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-208436379c9997ff563ba0775624ad7ca3814906_1591687856527_0.22343963774000897"},"_hasShrinkwrap":false},"0.0.0-8dcafd1b8b8e054334891c790215dac895ef66c2":{"name":"react-image","version":"0.0.0-8dcafd1b8b8e054334891c790215dac895ef66c2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.2.1","@types/jest":"26.0.0","@types/react":"16.9.35","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.15.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8dcafd1b8b8e054334891c790215dac895ef66c2","_id":"react-image@0.0.0-8dcafd1b8b8e054334891c790215dac895ef66c2","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-gmrBkhoyEF/IfEiGULR/cFx44zh33T4wabbequcCgMphZoX4WL1COBTFzpw5wLObd6ud9CbRX2RpYEJkQMGapQ==","shasum":"f57eb2072c41b843eeaafb172f939e421b87055f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8dcafd1b8b8e054334891c790215dac895ef66c2.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UX5CRA9TVsSAnZWagAADjYP+wcg1KdMVS4/BiLB6WNU\nbBk67ikLjQD0vUsaVjPA1LGaa86PWT5uAiouzg7mr7+wqQBWhjIQKoklooX/\ncVW21UwtFztS5NmcxMWN7KpV/BI7Aqc/XlPha0mVOWS1FZpQD+j4kREP2vFf\nnHF/ZkXwDpIteXm+XHmHTcgZINvri2r0Zh/G6PIAXrVE29hsz++AZPja9IJk\n7boVMNvZ6Ob83sk/6PauV7+i4fRaB0xRQUg4wftuxL8QpNAkk7ig/H9etkVk\nCDyZAa3JqHtSb/4Eg6FfrGQz9n5263pdj6qUybbZl5mU/Vn3x+isq69fC774\ncq8bs8NZgWqDrNxuhYIdMttTb4McOd6wGjVVeizdqOH/ua+lbiKUxWve9wWt\n6cYCMCsFJ3RXaHKZSdGPHI9Q+Onm2MSTpmOLHbh/zkBANDs6tAqpB2/jkADU\nsHD9jH+9VJV2hhdihrYsbtEJL9fiKvnugBCk6EYHFCEAMCSr7dpz92IPL/7f\npfnOsnzA4uQOped56ZFbJRewue3dVRhIZtgiKzKzHbdig0vjz7BA07dOyZ4l\nBN6lr0jmsWiG68munQiQQoNw0Jo5F5SK2o2nVZu+vZIxzXcAC3vqA+7Jed2s\nX/B16Z3IvGLwG5DREWVqhtCNW+m9w9YlZy5AO7r+r2gsPo26xxvrWWkj9Nf4\nztXb\r\n=jrye\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErgqM3YXQwyduZWHnb2p6ImHhPUBy7jNWHj5jwbrM8sAiAIrpooRmp1khrbqtVr0DrMAhZNcdo6BFC4cLomnePzYA=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8dcafd1b8b8e054334891c790215dac895ef66c2_1591821816466_0.19587941302961376"},"_hasShrinkwrap":false},"0.0.0-22c4efe53e8d6d2ce94dd56ea913186483f4cb73":{"name":"react-image","version":"0.0.0-22c4efe53e8d6d2ce94dd56ea913186483f4cb73","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.2.1","@types/jest":"26.0.0","@types/react":"16.9.36","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.15.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"22c4efe53e8d6d2ce94dd56ea913186483f4cb73","_id":"react-image@0.0.0-22c4efe53e8d6d2ce94dd56ea913186483f4cb73","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-jgE+L2yWmqdWGd2iUxaPmELWw/HTnE47o2q5hQsqZ+hFCvb3xfYnEofpJ1YplAgatg4Vn7GW1WaDtbzZR0mubg==","shasum":"0fc7e3c0dc6d0511f1f8c3ec3d1ebc2caf1dc969","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-22c4efe53e8d6d2ce94dd56ea913186483f4cb73.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4rPuCRA9TVsSAnZWagAA3z8P/jx5h+8AxGHJVvoL3ck1\nRhNfmaFwpo9gaR9K0fIWn16rpSNwh2iWlEpc05ZyaxekquIJFJXTpv3vsr2Y\n1n8WlA9TMec+fuwZuvyieP2GyIAweSAepXACIpxVqRLfOWfmvuLHQRvFP7TS\nISjJ8+zYSjdcjGXSP1zqPDz1+b6MpfrisH/1vkt6ifE2fyfk49ztDhuVuUQ/\nKQcaa21GwBjXDJNOla6ft6Gz4DHL0bCHAPfxxhL/kS/fjvvCnqG++99Ajwrc\ne+YL1zms/CAzeEumBbCB7KXa5kyL5zp3VaJnFr1ZwpLLWx64Y60rb9gSw6JL\nbn08raonXuAlzHiV6mwtFJQ/HjtOocqjY0ETVga3mdL9iYslB/2KFbY7aDg/\nIeO8BRI/RD9bG4z+w5CM9Eg47QCNTDEJ3hEPk0v9LNEQxSVFMcZ7NKL6bayz\nUeX754X2cpCHIDBk1Z8+ephk7leLjgBBlGPMWKvh2SpyHklfIi9EG+AvBQQM\nbJU5cyrWc2Bsw4mKZfEKx8J9LC7aUFsWrywikWdLp9emdMTCqMr6Z/9Wual4\n6Kv5sCDUiV+u2FEeK5iK7IAKyBtPFM+GdURWVKQvaeujD3a7mrrdR7nfQL9U\npK9q+FOqG1Y6nYgw3u0QmePzclD7strIbbQ/IsG2ZWOqu8VyOnsnIL2R08Fv\nvHBA\r\n=e8yW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAG8Nea760GpbYaXv2PaXEt0LBeOvVTw1lfGANCIBhJEAiB7LizrsfdYntTCQnn2VRhh4N6UkxvjMlaJ3ULw1Kf2DA=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-22c4efe53e8d6d2ce94dd56ea913186483f4cb73_1591915501511_0.9065756835070009"},"_hasShrinkwrap":false},"0.0.0-5a8d5ef5ac93db564f9307862b0b0927546b3f57":{"name":"react-image","version":"0.0.0-5a8d5ef5ac93db564f9307862b0b0927546b3f57","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.2.1","@types/jest":"26.0.0","@types/react":"16.9.36","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.16.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5a8d5ef5ac93db564f9307862b0b0927546b3f57","_id":"react-image@0.0.0-5a8d5ef5ac93db564f9307862b0b0927546b3f57","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-0HEqZ+e0EQ0p2EE486GbSFLOdr7JMtbBZ+lo02oNkhL0oRwZQdl6tXDJSKi92/LEkjKl2G8CX+16ByyGEth6Uw==","shasum":"b5f762c43ecc03a8fafc8be76ae0455c184a7350","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5a8d5ef5ac93db564f9307862b0b0927546b3f57.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5qoCCRA9TVsSAnZWagAAwyoQAJb1DyzPGyV7FGzcAt50\nqajAxYuHth4TF6eLlH+9hu+SADKJgNHT8CtcgXvoJ64WtsAclFlHX5nvq8hJ\n4xXhgStUCrjEWytYA+rb6D4LfF20FklhJuFRoqFZi1X6pl4PYFRWdPPh8Bzx\nCxtIJVCYK0++vXfpn0ip4CrdJnmiYy9MchmRwYUtsFoYQOxtAaVfuo1GllGr\nR5Ju99qxIUqLzlyQk/TdY9rmQWwO/f5PJFwGwqIxSfpcnudMglG6ljsRn8Pb\nWGAqiateQJZhO9g0jpY5O9CsRYWcvYTpXBo/gZVIjbEsKHFinyxXkYaW7hr8\nE3xbb9jsR5TM3qBONiS4GuYzZN+JOZtBUwcLCPTLUTiA7koefSrFBy65+d6a\ngtIxc0IBrmFfyFMgmpOXvwO0alneiZFhVMKBjLJE0/ETp0HFURUBWr+q9QvN\na9U6iWtcKcq2MTBBGGkNlvXBnha3UA6kK7YbLjvsIDvbPld3wMS3jUF9sp85\nppYfEdBNoHUQ2olhLZo1tFDYHCa0vvMWIeV9F2dNPVTLGxAhq/WBjV9/i3+D\nUGPtG4QwVdgsvVuSRs+JfnjyJMJv2jZZ3uvI78hLiwYPw6XrHLvVnpMUqDOD\n2DrkdToGMOg/j3RDamcs+R+CKOWz3zUOQfrcmnSQCDDPHhDHbBsi0JFsbGGR\noItV\r\n=TZSF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO9VNYOncnSqoUTArXYqQlxTQAEVkHgAN1futyPZM/nQIgDZ7tqvMC8QfVXnSM6GLsAHJuuhtQAMa7wco7V5hSRTM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5a8d5ef5ac93db564f9307862b0b0927546b3f57_1592175106283_0.6286207438183176"},"_hasShrinkwrap":false},"0.0.0-072125dbc001259d9867cabc7859107aa6ffc05d":{"name":"react-image","version":"0.0.0-072125dbc001259d9867cabc7859107aa6ffc05d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.2.1","@types/jest":"26.0.0","@types/react":"16.9.38","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.16.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"072125dbc001259d9867cabc7859107aa6ffc05d","_id":"react-image@0.0.0-072125dbc001259d9867cabc7859107aa6ffc05d","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-f++NkMdBGUPpC6EyxknpyS316mVzZRpY1fHKB8d2Vuag3OhQ7ptgY60H7XCFuVg8pWuRAxG6PLBNPZC6tvgDFA==","shasum":"37ca3b9212bcb7759d62dd1d7206afbbe8b09518","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-072125dbc001259d9867cabc7859107aa6ffc05d.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe66r4CRA9TVsSAnZWagAAyL8P/0rLkNHQJTz89z0fofIJ\np5A0bs4PR8b6boXTfcBVRQNPnPvDw6qZiHvHaSs9jsGqLz/W36pOXEJ2lcHv\nsAnWh9O9I7zMHOwK0a7EW3j46CAPv42WzwnBPtYwkkU1MYOObct5EX1o2+vR\n602kCMRqym859CiAI8hj+KhJqQEZNU+JMOW8luZSnF8OQRctPokIhh+MmQRt\nOn5+CqeeamOtmq7FuWQk/1dIdTi/28PZ6dylYNYRt0gjPfpKcMxWpnARJA+3\nfhEMolsnHRWy72C7DZ8VFwnmlpqT0JebtNQf31TK6cUKpqtQrl0AEcLKf4pv\nu2iWGwgH9BOf1eOa00jOkT+FIUtzedaEksW1HmFKmkIz2Luku+w1/6/hsO2O\nvK5CUzrHCPSDN4krre7qLYh1kf/3ZgBrdSPRC85zA96U1tGyFyD/TXSnv/mo\nwHo2ZVFVCKJFR7ihoJj5tPOQwLX9WQtuCv2qwZMBiynqLX3xJjD4RlMNfn+r\n95ZI0IBPFd/9Kc5QuipKVGybLyIZ1r6oQ6ruiK1eBb1eFTd7cszEnrn7AvO+\nndeaGzw3UM/OdxSL7NE8DbylZw3i1QitQ9cy69OzKK2D2QN4M8m8R4CeoB9f\nUPUI/LP798RLwtHKs8nVm1Mls6r+bDzpD4bUgE/Y7SjJybC1eXtxfyoRH7bh\n0Xv8\r\n=Dgvn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi9SfTrTomAC0mmUGMo2gc0/21CTHzleLr1YE6ORWtIQIgPU5R7sVnviw3RqfDq9NoFSRi8X2+5KSI0TTnKM3/Nqw="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-072125dbc001259d9867cabc7859107aa6ffc05d_1592503032111_0.10534029606972939"},"_hasShrinkwrap":false},"0.0.0-1119d4b5f7ac0041eb6216bcbb7acc80691a565f":{"name":"react-image","version":"0.0.0-1119d4b5f7ac0041eb6216bcbb7acc80691a565f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.3.0","@types/jest":"26.0.0","@types/react":"16.9.38","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.16.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.11","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1119d4b5f7ac0041eb6216bcbb7acc80691a565f","_id":"react-image@0.0.0-1119d4b5f7ac0041eb6216bcbb7acc80691a565f","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-l1ENrmCSgbgwbNfmGLD4/uhz+AysP/cU+754bC3LDxMICZFkQ1Ss5ON+fI2fK04mipjQkQMZ+PjTR2K/DgmGjQ==","shasum":"bb670edb99f3fb89f3c8b2fcc4ac4bbe31fc36e9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1119d4b5f7ac0041eb6216bcbb7acc80691a565f.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNiCRA9TVsSAnZWagAAeC4P/iWmwUiuXX8qhDT40Rjk\nVoUOYc4QgMk71fnQp/PpD8/LE1XBN6gfxMFtHMJ3mDfR5KWyE+RIHaMetvZg\nOIMBrVXlfs+M/i7c71UzeGYBRrxRKUoMJWe50p/IqB3caZF+4fX6Tn/G0IcT\nuRAAjeUEJnXyvjs+XM92UtG3g5XLClHYLdccS9JYEH5LdraZ/eWFRBG9oWqK\nqJs0dIUIdL47JI7hL1ff22WaLl2COtkUuWWFWSLaSOs1shGRAshWbGL5rYb4\n0Gb3hTn34dNtXswvawD4CsfV0eJhLRxrLqV/HRN2bDsXdsUO+p3VTL+ZR4YY\nBR2hpeSawpMIs9bm1zuFVQKFQaOgm1VN2H/xg/caXQTn/5oh/5HTiNKe4k2X\nwBRvQomDrNk2F/d9e0vrxK8w1RuXIU8fMGCUid1ipF15yHP9cSsX8Hgvy6jm\niPxKhdgDMHybPsMDwWhD6wuJN0RpkFlZ2oOL9xQL8rtXoEVUR6mZptzHJJ0p\nxmuagLxMbFA76RIlxPV94zu+Sk5R/mZcaN/y1jSwg3xJeBm/wtGpvLq8bH58\nH+oT+a60Wwj7e9Og+YcVqYsMKSUbBVLUXtbXM1pdOslOMS6i7ZXskr/XJGxj\nrg3yjmJ94frDP8wnRQKkNqNwdrpnyrAO3+w0oUVjD6KVrwYlKIPvDDTlxvvd\nErLJ\r\n=sQqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYTSd93Pkjax9RpJ7T3KedQiJjcmETXginp0ckU5NC2AiBu1SRvV7fxtW8FRb7MB5qsBAYoVi+pJJsvApGqSiYX3g=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1119d4b5f7ac0041eb6216bcbb7acc80691a565f_1592599393779_0.9468941961742001"},"_hasShrinkwrap":false},"0.0.0-4d21b65770eb5df56a0ec137d0db809f08ba90ff":{"name":"react-image","version":"0.0.0-4d21b65770eb5df56a0ec137d0db809f08ba90ff","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.1","@babel/plugin-transform-runtime":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.2","@testing-library/react":"10.3.0","@types/jest":"26.0.0","@types/react":"16.9.38","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.16.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4d21b65770eb5df56a0ec137d0db809f08ba90ff","_id":"react-image@0.0.0-4d21b65770eb5df56a0ec137d0db809f08ba90ff","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-F8qcnmMGdeujhplgqonM6rH24xPko7wVimYmujELQfgMvwVM9QOLnT7+hCmpnpnICnLeRQQfvbJ/wJq5dXNiXw==","shasum":"e58c49d03a6e8905b1e62b773953f4038bb886d7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4d21b65770eb5df56a0ec137d0db809f08ba90ff.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S16CRA9TVsSAnZWagAAx68P/03qDNLFxAmGixYOYhGH\ni+h/7tXLnzkbVPSzpAe3n74gEcQBQtmDU+faA1If3d5y4Vv2P9Fkyh0Bo5Ow\nVH+io5mgaPzzu6g/Ku+wdOlF7KvuWmq2NJlAefMQ3r3wTicLkYA5FlX1iVY+\nNzva4G7FfsAh80f8yDpZ+xW2xd/BtDKIaQuvvekFXg7Exc/TkdDowwgFrCPu\nMEs9yDvi8/LuZ9LWVfCCqJmyXL59YK+jPlRmK2he6NpNUWk25bjv9bv968ti\nLlBbdumVRfo70rM/cvvFm5mV8BmSuNycmzb4ZbU5PA0Zpm/CSCkZ/LSm3jJz\niYV8KvBBSih9eDKfDlvgcD6DG9GsZVT5sjkwlFgZhZe5Mv4gruoN5uTAlLVq\nBORpYjouGA86YPAzI+z0yNBE6/gOI7SfasDPQQAsPzzd8ixI8muF69JjskhF\nDKfq2tDMSSvrA1GY4grL0nJ5ZzN5Pu2T7k43359XIEbggqWqJnVM/2TjnnZ1\nFM/uJevuJizHk4b+gHC4pNa5jtyTTQ1/GPfRqkG5qFPn47u/wT24oTS55lWe\nKdHgz5GVRc0z14Vn1sI+P629Vp9vYMoyWViJhK82KYQKYzaiQpv6z2POf/LJ\ninSkyXWBWGo4UBzF20vicp37bJ+D0Bb5rlYXmXeWXbZ1yi0rVSimGxJsVzu7\n2NPW\r\n=ceTe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJGSfey2AwEXuKetV8gQW0jQnbgiaqSttfw8caByYRYAiEAkuUDeZ3VZ5WLy4RXzfJMecE65d0R7H4aM1conz7GgfQ="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4d21b65770eb5df56a0ec137d0db809f08ba90ff_1592601978011_0.4931220601332975"},"_hasShrinkwrap":false},"0.0.0-6737d7118cc41c282fc40e6f53f9a75eca7b16eb":{"name":"react-image","version":"0.0.0-6737d7118cc41c282fc40e6f53f9a75eca7b16eb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.3.0","@types/jest":"26.0.0","@types/react":"16.9.38","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.16.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6737d7118cc41c282fc40e6f53f9a75eca7b16eb","_id":"react-image@0.0.0-6737d7118cc41c282fc40e6f53f9a75eca7b16eb","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-1kRBriYS29SohNkpTOKfQjolRNxL8Tz8TksLzUle2o6e0RP54rfF/mACxj6U+28UDeBxHcKNu3y+gCY4VElvVw==","shasum":"9d885378a038395f16b33765119e85ab6860cc27","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6737d7118cc41c282fc40e6f53f9a75eca7b16eb.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7qEqCRA9TVsSAnZWagAAsUoQAKGkF17nNwRrkK19srJO\nFiaQIot3VdgF5lBJiPD3zxEZD6xOFyKtQFS7u02me+drQ08/xgMWtpPxse4C\nabAJIo2bca61/pKGcJsaE8yxJ3gkRZd3Z/YBG0fsNV9wSvuFcTeJqS96jtgT\n5TkcYAcIAo0s53ZtagFVPGzPdlUJyWqQBtDXmv5OlbtvrDCdMhCf65yxoX6e\nn7AhVAGQWgzWL7/4A+VcvgbChe4P1Zb1pr/IHr9UTIm3otu6rXTHv1IM/p+v\n6WCAKh0jLl7GaZx7G60wScqji2uQfkEgfL/tMd9txPRBxz3u162A8Sz0+mAQ\noCskTGMCJk6jvoQnjS4H8osQg01XUQ6+t+zwjLhb/Gd1839x6az9r64o9Pc/\nm3/lYAVbkID01N+GsBIVDQ0GEEDhMZuLHvW80fWxs+tnlmqhsGQYsQI0Fiw3\ndQ+0h4FCInmWa9UIXsLmMFUAFvHfsFwsbEl5AU9lyBEAJ0/LT5oQmR/9hEht\ncRgAgoLs3t8hX2I3DNNmqJFoLbss2YYCaieozK5jcm8uk6DToYwtHh1VDYau\nUdcxuYz1eppJ9HYW7wioQhEGuu7qstb104ovH7S0d93Z+oZETdqE+Y15tqI7\nVuIQwq/C8GzUrXt6/lLzHm8u20CL2sGA4zOA2tRcEifoly9ZkEQ48/jM6KhA\nG0Yj\r\n=YP9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLKFHRW4HP5I3uRsOdmDJNMzlQKQbdI799TxHW6zJhXAiEAmklc4kZZbfBpuKdNmCtfvMiIVVaf3TKZwLSE3j9Zd5o="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6737d7118cc41c282fc40e6f53f9a75eca7b16eb_1592697129732_0.2819628957086493"},"_hasShrinkwrap":false},"0.0.0-1650150386a757ec6a16d41046071554416c1f24":{"name":"react-image","version":"0.0.0-1650150386a757ec6a16d41046071554416c1f24","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.3.0","@types/jest":"26.0.0","@types/react":"16.9.38","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.17.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1650150386a757ec6a16d41046071554416c1f24","_id":"react-image@0.0.0-1650150386a757ec6a16d41046071554416c1f24","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-jze0trcNLUU8uMGMcARv42kqCyrltQ7cpUI++htEjOGb8RS1XcJnA3UWwyzjfds3IsK+gB4G1ASqWOpB3v+EBA==","shasum":"929288254b405c8c232ab546e28d8f13f9ee4c16","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1650150386a757ec6a16d41046071554416c1f24.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8BpiCRA9TVsSAnZWagAAm6MQAI/4Zj7yaZ7h24Yt5HYJ\nmw5KO22BM0eXsw5pxW0UWNlcanC1+pdo8K+AYdMVAikYO862UPsRnG3LyoOu\nG0C8Pal/k3b5cWdZbblLfFlJLd2EOk72tIQKJuurEupwx/3d01SX9TVw6wMZ\nZAHhAIAAfn7BLFQzL9xAm3TwYLnExa5Uuz7cXt2kL1cNHcT7FlyKZ2f4Emtx\nV/4ILsZ+pdP9TrmeQJZ5Op7lzM8G5Vw7QLrU7SzfzgBdfemxCbJuisNIx+Hq\nfV2u7RFNXJR9rNp79Doto5P7HuDmM9oysOKnWDMYoq9SfKDc2jK7cdvnurpC\n/mYr7fAiWKq2lAxbCcL/dZVru4eElGmIa7XNndtw9gF+ZZYlrFpmTlOw+xXZ\n5LW0EjFyu40v3fSLi1ft0XWPNbgbwVCYTbEuyRhdlMHJHm/c9pHh6D9hFIKS\nwHJqalUz82p4o4ikrV5+QSl1EhKExCl41M2bHbg2n/1tedJdQjhasPjcpsSh\nVlfWXI+0Qa/JEnF1tOyYtJfMlz29me5DfeHXAz5fhuG8kF43IFh7KoLTW+xi\nthzr2e2n+5xAYLjjrQcBzWUy3sUq2mfJoOl2O4GabzqO+LtbwcVnVTPkrsgG\nd1fJkgyuHvXq2/kXhKZow79eNHx00GpeyKhWS8Q1mLxHdawjwhFUKxQABNYQ\nmNu/\r\n=vSSb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqdhZ5RfrbD5PeUOoUcgH6ISfnkScM6sUQp/QppQJyiAiA98DpKp/Ife+KUIHJGbtrrOLis0fme/VyvEr9frolT9A=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1650150386a757ec6a16d41046071554416c1f24_1592793698008_0.27013655071749154"},"_hasShrinkwrap":false},"0.0.0-bfa76fa3ab2e13186f8e35eb5a020a5aca4d2011":{"name":"react-image","version":"0.0.0-bfa76fa3ab2e13186f8e35eb5a020a5aca4d2011","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.3.0","@types/jest":"26.0.0","@types/react":"16.9.38","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.0","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"bfa76fa3ab2e13186f8e35eb5a020a5aca4d2011","_id":"react-image@0.0.0-bfa76fa3ab2e13186f8e35eb5a020a5aca4d2011","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-zfGFikGcVWn4TbdAZLCYbI9ZXDGuUy1ibjSCEaEufuYXWbi1b7me/X+atVlajM7sVp/yxJu0TqpHw6gS6+dFNA==","shasum":"cdb22e15d93b3d2601e1454d72c3ac6605a88285","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-bfa76fa3ab2e13186f8e35eb5a020a5aca4d2011.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8bCnCRA9TVsSAnZWagAAjwoP/0nELrHxzEOHHoAB9p5J\nlqZJX0JRpekxpwVYP8Su3qBaafJetHOcmxPUj89NpM2vojSSTx/6g54cDNh+\n3X2UH0TmilRRM5dRICnLho3GFRIIbvaUpFpP3rBo1hGVvGhkb6Ci1WyzKHYh\nme5Is5yN2C9zdq3YrDOkg+Qx4QC0Or/Lpr15wU1zoSTGR2+i0w0kWa/lsK9J\n6EFoPkz3TJ7H/KMXjJnwwwwHe81pxKpx+RQVwMbkMFMaXLLnKyjznOzlfwSj\nfIalXz58I4Gd1k6JhTfPa8eULeFu7eUD6tO6uA9K5z8xI69D9EDYs94fXmTk\n2rAZ/lkWY+cfp9d4P+SoAnGSsr7Eq3Edd9bQJCaWX6hrR6B3b/lsMot7YVYK\nv0+Lu3DSfUAvHp7cHsQT9EI4KXo7qSnLXnwZwx7qIJn85w7Ap56P6LQlJB7Q\nJhsUJ/mukMSMNe8KE10dBoWyy6uc8+pyiB28cI8RSP0ZBmPf6u9n30oxwgGz\nSclVnLq3dp6iZageqmY58SUuNGX1oQIvLY4dkDMdhprGlceAsKglY04Xn9LP\nYGlwO1J46ckCIkLJEsuFb+trAy331YxAZyQNe/usReJRRGkgxNS23xqDzgCP\nxDgjkM27s3fAeq5H5SmANeJzXaAEzlYb8q3N6d5rNZo8r5icuvERJZODs7dS\nCU0s\r\n=1kAf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8DJEXFMSEcKwCJtGrNmAL+UG53Pa/1EJ7+UXWyk5JVgIhAP+ge2wHvLjCQ16+zVsZW/qDAqgjko7u9Gy1Yg6bYBxs"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-bfa76fa3ab2e13186f8e35eb5a020a5aca4d2011_1592897702912_0.35724201028590685"},"_hasShrinkwrap":false},"0.0.0-ddd30f342805d8ced83d7b332b077cf047d11976":{"name":"react-image","version":"0.0.0-ddd30f342805d8ced83d7b332b077cf047d11976","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.3.0","@types/jest":"26.0.0","@types/react":"16.9.38","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ddd30f342805d8ced83d7b332b077cf047d11976","_id":"react-image@0.0.0-ddd30f342805d8ced83d7b332b077cf047d11976","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-sppE67NXEVnAdOcI6HCaejrTpwuOIn/4BC0IB2XEAEuXitVPCp7P1KnDw/Lmu47z15JCDNY27yKI4p7U5cMkDA==","shasum":"4c2450d0c76e5f79fcc8534505f09aec77823329","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ddd30f342805d8ced83d7b332b077cf047d11976.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8yjrCRA9TVsSAnZWagAABusQAIrvMKxJR9uD6GRwGkdx\nZdJCx+ObpWTbebD99Bn+xcnwuh+KWKZkACFrAuQNToCMoP/BOkkXo5tuGK3p\ngFSX/Zw2fLSd1bjrQFD5kKj61vnklYWm3NPAj9nf16A0A7KOp48/8sLygDzp\nHE4xlQx6Sw4u5F54SESQFRwPTb5fV5rxUQuBqGHiF3D3gi6W3JZVqu6RJgcN\nbW7eQZYkPhntb6szMSb9SqpYgr+nlWANS20ZRjJmENuoFVaPvrmLBU93+hZL\nz1ycCc9QCiCzU1GEKo9n/nEXESNQS4DT+3rfG8RYydCqCttRdX4DrIbjDgXW\n5MGnV4e38H4Hp1j42MBXE5PLvq7M9/89ZbXwKZhmRUegDTeyCO57XewcLCNJ\nBQ+T1GCgeb7fCKk5rIEB4JIXv3VN+GXLY9HG7NJpMVpq1IDM1jopeKNf+BQr\nZZ74fx3KNuNAMzqc3NemvQhkmDc79y1yr0gZC7oVXGEyA9fXciT6j+VkS9bl\naYo2zVPDqVc/18AUXQqIyFHhokoJigLsIK9Btg1bTuzUgr1CDegs87RMstLa\nqWlJJf4Hm+PiSPeEMU+EojF1CiD/32tZXn4VcHokZGbLTK6rww8n3sM65Otl\n6D0RQpIVf4uDBw2j8ROarK6CD1no13rDLLc9jKFHd8mIwc9PZBiFtovOikPb\ndyoB\r\n=25J1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd16EYBp3cqbGg3CGyZz+jJXaIyG3lqe6vap8RSft+NAIhAL43EF0glzSlf5g+a4zkUB8BKBq0X32bSdJ9dnNTR21A"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ddd30f342805d8ced83d7b332b077cf047d11976_1592994026645_0.0022374169792984677"},"_hasShrinkwrap":false},"0.0.0-5d9f2db2d0deef3ced88c617b194eb0bc5b06980":{"name":"react-image","version":"0.0.0-5d9f2db2d0deef3ced88c617b194eb0bc5b06980","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.3.0","@types/jest":"26.0.0","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.0.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.0.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5d9f2db2d0deef3ced88c617b194eb0bc5b06980","_id":"react-image@0.0.0-5d9f2db2d0deef3ced88c617b194eb0bc5b06980","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Srzk8fDiWCLo7EXnZlSBUFUAmyxacupv/lK8JroR+Oz+XSmdkmVX8+aUgH1kLg9IO6c47xpHqRi26qeW4XuK2w==","shasum":"19937ee54d085cb6eb7f682c64c17efd269ba257","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5d9f2db2d0deef3ced88c617b194eb0bc5b06980.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9KqMCRA9TVsSAnZWagAAMZYP/3wPWfVvj5c/qvudJxO0\nUowSYcvZ9nzUDC1eBsdeOT2Z4Ilv60UPuqZ5lEORBtEAeO/knkLJQakW8ZzO\nkx6eQMm+DXpDQ69UAoYSyCtwJeF+Xe1U/WsKk/9gmijqIkso7SVIOCZrHhmj\nq7btyBHwpLujN0gFpiaiieu9//l8y8yYK6R+UGcpVoKXHcQ0yyK9Q3nleNlx\nqvvKpspa5NeBDFaAh5Vu87btLM6AioGIDV98W2XgAZ/+K6B54kdt69gu+J8C\n4jRR32/c+JHsZZg4/8vEL5q26D51yETaBTD3bG3YuRhkp66pw+jduHuf66bI\nQRR7TOBvuUQ0tOqiahOsKJBkf58gNg17oQTiHCbhjTNnQxzDkY5RSiTxxTHs\nqFcZe4J+JQ2+5xPKMue+nwIGIAittiPXksesX4U42s64l+9H4JJGqiyXgoIx\nwQ5xqfAIm/fD0DK9NtfSD1zkKf5+ThPxSseKU9rVtzEYNAbp7oFL1ZAh7KT6\nJjkGnaaTkG1KnLwtWOKiRkCuNdeG8yIzlpWHbO0DTAS6y0OeM6QYVVMO7I9w\n2jE0OPC0lGXk6h7tz9UnhQRfRZmF0GhpYOLBVN9v3QSV0iy439SlVZ7Ply4K\nVHfk3Wn/fwsFw4jZPB7xFoFxRGw1WUH/3x6Zvu84VpGXvMX3SAaMNV7Gu/Hr\nShjk\r\n=YZwz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAug0nwhnE3BIFYyL0sN3mddh5Ogwe4zrbkV1hQimr2JAiAiUdqsj/YUEo1/bSAWP8ko7ihQiA+Rsr366uDSsomrnA=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5d9f2db2d0deef3ced88c617b194eb0bc5b06980_1593092747885_0.9456870056883528"},"_hasShrinkwrap":false},"0.0.0-e15e7873bedb7deb4eefc0203e429416415d7f9b":{"name":"react-image","version":"0.0.0-e15e7873bedb7deb4eefc0203e429416415d7f9b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.3.0","@types/jest":"26.0.0","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e15e7873bedb7deb4eefc0203e429416415d7f9b","_id":"react-image@0.0.0-e15e7873bedb7deb4eefc0203e429416415d7f9b","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ndq0NM5sVpxHUrjb6UO/CTaAp6qoaP/s4E30Ki7PGriavM8CNtThyB+CJBwdX4OrlXVmZIMMQBWlLG9re4ILCg==","shasum":"b6b2692a01b48aa5c0685cfa6cd4f4771cdfd1af","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e15e7873bedb7deb4eefc0203e429416415d7f9b.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9MIZCRA9TVsSAnZWagAAXV8P/iKKogX6u7ddrtB2sk2R\n9waWd1Fg5qumzE3s2PhAwXjQw/QsahuA3yfMcHLQtUT1SGoECnoffQjJYT4q\nRAv5q51gBKHS7YD6udAze6OW6ZimHdvBY/4pN8yx9N23U70P5HUK8As5MXj/\nlMnK69laM+FoY+PJ8uUFliEtaw2p/gGPt6kMKmpSdj8oOUFWJeKpjsFBsESX\nzQ+SQjqb1/cs46J1BM/7EDymvnZ6t1Mq11D5VBma9lA16LH0GNLobI1NfXtU\n/d30mwqIePUUiJR+9I4Xzi/AYQfTnD09GtA5OL9F9Eao/rBp5W8vCgQywZzL\nQb+phNnUZDkeexzmUi7wZKBLxrGLCvoWNjgqKM/aCMB074AO/os9lJpf3z5G\npgijw7zxEq2eZGkW6U3bQPxXye156IFEsvypTQ8zTrNggEgB5A5fzYSYdrgv\nStZGlG+eolkb2lczHNG3OuylLr4qfdeBC8slc0bmIDqarcdOgA244etBJdRw\nIlwJD8iBZGY+rD2jQhCzoAHuA9dQ1dXlEjEfDUjGO++3wh+f7ns/TznuAo1t\nQJby6QXYwqzcCQqWJDDPvW0eu2ChELOvvg3rGIr7dOM550xin6VZ/+n7B7qJ\n51WpnPE2em3htUyWZ147krNSyS8lFwNfp6+V39DV9IXEcEYeJCdC31cSbkdc\n7rB9\r\n=B6py\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBADbZ1jmTIOS0qqWSAG0pPMX7K2JJpR4guGV8mMR4eRAiEAqp39FAYZFeM/3fA9wZRI6t5GwYNbYpYwotlV1czhdmU="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e15e7873bedb7deb4eefc0203e429416415d7f9b_1593098777361_0.019092850242947712"},"_hasShrinkwrap":false},"0.0.0-730aa4c1937a3b4cd5cd939e6508243a45a451b8":{"name":"react-image","version":"0.0.0-730aa4c1937a3b4cd5cd939e6508243a45a451b8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.4.3","@types/jest":"26.0.0","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"730aa4c1937a3b4cd5cd939e6508243a45a451b8","_id":"react-image@0.0.0-730aa4c1937a3b4cd5cd939e6508243a45a451b8","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-IQYMkEOb+kl/mqahKM1CYrf1dGhj+PIMoGxDp3csqbL82gU9nYyeCRZkQbbgfcUyHO9u+IKRjd3hbbG+fC4sog==","shasum":"fe11a5fee0c2ac69ae25a00630800867e9da3fbd","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-730aa4c1937a3b4cd5cd939e6508243a45a451b8.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ioaCRA9TVsSAnZWagAA0OQP/0u8GcHdI09Y8SGWJFVg\nW4JwohOasLaCwKDedKGVbBeUWX6imsakHxtKSDIu1+pRuEmPCwdI/XqGuaqF\nZjxNYhDh/Jr8qM/bvI2ppeUHMvNfwMBwo80T2hin2OkUy7zg+2yeciJevMuj\n+r81nPkmEYfro/Vq7gv6jo/8narDVp5C2DVBEviUBPFzT7W1VpTpHEYWtriC\nC21+kYjz9n2Jk/bkVCINaB74L4USLSdjsuP62f/pIxZrFayVHrF5T9Ew7109\nIFMVm8cHqB1MVFA+7nIafgHsIiHY/A9Z/lyUwp15NOmdtgJWCurOHcVqEdn9\nO1CZRWshLxLojvRs1iapKM+UKpZnU+rM+QjMQFRkfgYJf7QtSQJsbFWEcx3g\nnaNS86fobjtx2a1Vwpa00e6BDxPh3sbtu51SKaPMy5fkM5bBSo3CQs2XxcWm\nnq6nW+2pUErG8ByzjrNq5auj4y5PyDlbXI3cGoRdzAS7hATtKpEYAwxCyHDq\nmnGXPJ7hfPecLkEEVCslwkjDLSLzArDPlzYbSo68lA96LJiTwsgYTFwPbyul\nI1bx+XdoH74PPZ1PZy8MmCtOIreF8lcnsY53Jdy8/4WkI/N2wDtH+Fhs2bTy\nsY3n7TkiObMg6UeljNs18qcZ7CJPYLzy3kQBdQSC5ode3ggXyGSQaUMIe5kI\notIT\r\n=wIGd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2HoJ/fM4RxqAc4KJ+Xrn/135CrPEmupy+rrcGuz/jVAIhAO2LMpjHrdw+SiK0FE9TArB1r2OLURqBLhIR9XaG/aCM"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-730aa4c1937a3b4cd5cd939e6508243a45a451b8_1593190938260_0.6075985999875273"},"_hasShrinkwrap":false},"0.0.0-938b211c9ffc8ec7de82051abb5c226885cc221b":{"name":"react-image","version":"0.0.0-938b211c9ffc8ec7de82051abb5c226885cc221b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.4.3","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"938b211c9ffc8ec7de82051abb5c226885cc221b","_id":"react-image@0.0.0-938b211c9ffc8ec7de82051abb5c226885cc221b","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-/XUNWLwVdnps6S4UZiUnWgbF0BCV05zeVLfoGRE4OoxFoqvqHRNFprD7bxuq29SmEx/IYXxWK+6WzRMPr9ajZw==","shasum":"8ed25afa83627c86e611cfcc0eb9a0160dea266e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-938b211c9ffc8ec7de82051abb5c226885cc221b.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9kMFCRA9TVsSAnZWagAAJ0IP/ixjiIBI5U9Mr32rNg3T\n/grtqpKStEOFJJn7vK0MSn8QXTydEKaeaPOzNNcUkUjZFG/hoFEH2MjHn9UP\nS+JUj4fqrmC0mdd66DirQ4qHLUdh8sHm4IZ0wllPgDQTPOB2QN0jczyv/CD0\ntOEUQTLLZK7Yp1qyJhnJ1Zhj7IQCgc4PJgPWANpn+Wh2t2cwpif7Qp99mPJK\n994g1B51gffIjUrNKov9aHoFkujjghmVRBFdZ6stPWCC5ELdhtjI6z67uv/B\ntWZDKoMT9liVgIeb849jL6JvsrT6mPak/TU3nidd/jZ+E5IXjO3MOyiZ3eC/\nAvsYt8akWViIUq2cuEmNekdWz2XcFgSheeKCzEe9GarmTrNcW+BUloX0rSfJ\ngdFmCMZA6mHtYxjDcIU6ndVLsjs35cfbwgQsosI3/hHltCtm52qwhr1L4VqS\n6XvBHm4d06oUHrVWjrq6HAzQY21An8ELhW4hXT3LZd1uD8A8M4qBlfnFZRzc\nfIR2Iy5zUHcS9JYuCcJiQFQXefBmBqzyjOcIDKV25M8LuwT6vd8VIMHWpdqZ\nYqzlEKH/vjCxSa4kSiaCkmJ1hO+sn+QJm59fEqiPdQuC/ifq5ywCpH8Jq6Sb\nMTa2wH570u/oZuRivT9d5zKkCezvHuhhN3GSDC9k0v8hRlAEIg1RGW8OxhTs\ns5LZ\r\n=vKeb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFD7RR/nXJt1QWUvd7McTEohRUNipgp7CG8CllfVHJ1hAiEA4+Db6qksH7CZelFJ2X0fB/JKMNb5Mqcv3Ry94r2Y8XE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-938b211c9ffc8ec7de82051abb5c226885cc221b_1593197316827_0.5525990169706081"},"_hasShrinkwrap":false},"0.0.0-4e9907eced970e984b8e676ae10a343adaedd3bb":{"name":"react-image","version":"0.0.0-4e9907eced970e984b8e676ae10a343adaedd3bb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.4.3","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4e9907eced970e984b8e676ae10a343adaedd3bb","_id":"react-image@0.0.0-4e9907eced970e984b8e676ae10a343adaedd3bb","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-hrS0iyxnRMrNe8G0GQm4C4MsmJBsD3VQcAu5PbP6XUgdtXogD5KekLpWqFSJgHvhmSJPKnswnkX9fMx/OtgLsQ==","shasum":"d89b846a6050ec631f260ed67241d52776d7d305","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4e9907eced970e984b8e676ae10a343adaedd3bb.tgz","fileCount":20,"unpackedSize":37872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe97qVCRA9TVsSAnZWagAAjIAQAI+JNr/roKoX1GkVHkDP\na6ojGmei+eZnOTqsLIwDf6nKC14e3UcnMmbCwKxrBQOf99wgvKH6a6jaAuiB\ntEcPnf/MfmKxMbJ6QzDIditiERwduQfJA/Kv2LnxaySFV/kKHmlSr8aR0m9M\n+TENersWV6leFD6wCF8dIdQf7jWyWT/NQ88zUfpklUZsOXCnz3z/l/ndlFas\nU1ZQtMpzPdb5SmE9SPtamjEXjHFkbnIgy8dFQf8KUmQtUNszHa7XVU0oIDPW\nKNXrR2U1OLnhjwifTwsFX/GxKUi/mNXKr4P2Ara/k/QIfLDGRm0+UbmBQUjH\n5vWi6qgySnZs71YJdnizk9ibso4sC1jWTBqntRwnTRt5yQAMtVMzGf8xyIPr\nY/eXN5HowejC/HgUEjYgDlHeWFUufX6aL5p0uQ4dm+X/VTzAXs7Sga5oaXo8\nh/pMxhh0HGJ4N1ydV06BlyW6fc1MYaJMSIsJGRFnqSgYRQQdrO0yH9IdUzLp\nks3V3nuO7b5Hn4SeW20Jnr0twILInJbdIJfr+HFfnU/HRVfK4T0zq7Mg1LhO\nQRS6bRgftfQDTvhLA8x3kW0iEP31Ria39S0zxhZKNaK36c5V2avPWI7mjKCI\nNiukgQiD0Cf/Lp23hYbeMOSP5cUaO+S1odSMZYc06VRS7JjjU+vzQJ2rkOC4\nGe7N\r\n=bG9P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqPwDAzDpYjPQvy5CER3fdnmKkmgTiwO2K/Ea4FYlKRwIhANYoowPXU8M2lEzwoN0P2ua+MnxSv1Ep43OJI2q2WUEq"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4e9907eced970e984b8e676ae10a343adaedd3bb_1593293461113_0.9200757896332155"},"_hasShrinkwrap":false},"4.0.2":{"name":"react-image","version":"4.0.2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.4.3","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"gitHead":"8791d79c5d07bf91edb3fadf46e95fe9c1db205c","_id":"react-image@4.0.2","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-HmCoa+MHKisG5K8Xjc1nNVpOCF7uCX9ErpAu3ZBofWHTGjlsSRkR0Lhju98R89ZrMjs1ZFouuzR8ZKk5OymHWA==","shasum":"5ecbe83cfe9c706a44f34a02ab893c5ee6f709a2","tarball":"https://registry.npmjs.org/react-image/-/react-image-4.0.2.tgz","fileCount":20,"unpackedSize":37894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+By1CRA9TVsSAnZWagAA7PcP+QA2xxlNdAqKZu+FPPMF\njIOYdGR1P5G+VbBFh2mvjuC3VoSXSBSaLj6KMPH8JLor5gmHY6a3nLULu1sx\nE7GbVvyJStK7oV3JYOKW4bwRnHFaONr+EEPychUCO3zP4gERlygjE88e1l8d\nxx5K1X6MFeJccLqSSvlMm319ta12s2QBO0Bh5WwrJ+wgAD0HVYow+ynysa6j\nohwQ0A8FGZ42Hfu3zoVsgoDoFdl6GRi+49Qkrrai76gAbVdJs4TlayTTsD2L\n1KYAxZS+JcZTj8rZDODucyjNETJr78LyGx7XUsNITb+522LDeDajZF7zNc6V\nXXeLste5LQM+zxZlipvTZNJORoHO+5lWoTmrSdLDCnel2KJa9XLlZM8lMkv6\nDGyUX/bEaGuirVOaa4WBWQ1+VxAAO1dhW4rb2nzp2w7taZJONx3FQZDXQU2/\nAoxSd+hTQkINMdB7XdxwsxaZyQPjdpuNVsnZQKgujLp0beDtTNqcIENKO51B\nGAwUX1+LXd/SmEUzKQdimoe87Bw3gyxWH6VknVZ1GBS+f29QOPvd6KlbcDtw\nw4UGwQ57ev0lFqU5mz7myc5foYgjKsXoi1mRoAEGiwG95h3kqQORtNSId70L\nNyQYp55zKEmFtEjjGpHxnjctSfxBMh8pIU3ItK9SRjuauUPaguvqIqc/72i9\nLBRZ\r\n=v55k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPtsdvylxSvfbkLnOpVdlUaDCUhqKkTjb7Y+xKMkB/oAiBYQ/xpC3ClmuS2vcoGQTbQTaQCnJQfN3TS6mfXKCPbJg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_4.0.2_1593318580710_0.5281838391996823"},"_hasShrinkwrap":false},"0.0.0-8791d79c5d07bf91edb3fadf46e95fe9c1db205c":{"name":"react-image","version":"0.0.0-8791d79c5d07bf91edb3fadf46e95fe9c1db205c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-object-rest-spread":"7.10.3","@babel/plugin-transform-runtime":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"7.10.1","@babel/runtime":"7.10.3","@testing-library/react":"10.4.3","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8791d79c5d07bf91edb3fadf46e95fe9c1db205c","_id":"react-image@0.0.0-8791d79c5d07bf91edb3fadf46e95fe9c1db205c","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-0Kv+xNtawX5SpmGOtkQeJlfaessWy7a/3jGESX3UgqoyBLI0QPB/86qs28f+RRYBi247QU/FOH7v+z5ZMj+E6w==","shasum":"6951884404724651c7a1abe65f2909d23cd7244b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8791d79c5d07bf91edb3fadf46e95fe9c1db205c.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+By6CRA9TVsSAnZWagAArZMP/376h1sd9NoqlemaRMZH\ntGxeplqO3wkzokLDCx3ksw6W8T9W0O91ooU+EqqFEdaMCbaGRN3BStrI4M8t\nkLEfo1FVEf6Qnl1jYrQ/0TxBfah0pVpYAL44CZRrRWZ9GaIBBH6okzsYuGtG\nqGOOmgM4wNliHJWE2FUOFac91EOn6eJFwT2UgxyftPxKHMDJR/CYTMd8Fc3J\nBDOFAqodnUFFGzdBz7FcqjhuUafb7GHD07bN6MheTGdFQ0S35xd8FpHsQHue\n8rmXDh2iCP0phB0CCj2Lq6Ad7/rZbTwIDww87HXxsy5WZTOJRF6avfqL/ibr\nFq6NfS3nP8tnwuEGi/0xj/L8+TPyKu5G8jdkLYM6dAsWO59gJbjOezq4XRel\noPw0wVbU9fp2RNUZpw4vqW8G/PU9Xuwd66b0ugR8QYqU+D1xzc6l1Lzomf1F\nb6p6TJncxOu654IRh2wY/2v9MU2VqUDyIKPIzzkUuFG0s3qx38bvbWFQYBJ+\n8Lw3mJ/ZUY2Sk7aGlydSd5CUqCny9FLDgAoH16pAgv9xGSgky4D7fXIWLr7D\n9KKZnWSWr7uKg+Rz9Px4DhJc0JJPPn57hwK2xS/3gSWnPXBMjv0nBnL7Kmaj\noJTcHoJt6/Ya+SPHnnHbrUnXZ19ZVIb7llfmSHfERxzeBECAekbg1pGZuOMu\nKYNN\r\n=Hk0z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxLgvX6+elTeUSDoSRUMjtB0QdLh1Pu/nfv5QeKKc5gAIhAJyD758qKvzwEIyWuJjsEaHQMRma6aw4xR7fh9/AWSfO"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8791d79c5d07bf91edb3fadf46e95fe9c1db205c_1593318585550_0.7649011178834644"},"_hasShrinkwrap":false},"0.0.0-e4dbf4d2651b79fad556f54a3b2c595f56676671":{"name":"react-image","version":"0.0.0-e4dbf4d2651b79fad556f54a3b2c595f56676671","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.3","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e4dbf4d2651b79fad556f54a3b2c595f56676671","_id":"react-image@0.0.0-e4dbf4d2651b79fad556f54a3b2c595f56676671","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-975HoY9UhLqKZxHGel9gDNZ3ngkB2iB3cAvrkbct0sQDb0rKC5rJtn0DC2L3OXYzstKSCQabFCbuYReCMrFc6A==","shasum":"7aa30376c0b4bf9ed7c6f9692f329de28cdd516c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e4dbf4d2651b79fad556f54a3b2c595f56676671.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/J9JCRA9TVsSAnZWagAA+I0P/3sVfsbXCkfRQDRez+HU\nhqrvrx7NjlvFME2UhhYJ+19+UlUmTGLja99RksMA+PxQtB2jU6XP3Elklqm/\ncxr0dCVvI2K8Jjy1NtCa2HgzAw6uRYSnwSYpJZv88zEqp3iSa5r5xg9aSORE\nDa8hk/6j5gDX0/xrtaEVn7umQHYqkgEoNqXLLlQlB9JpnHksw7ZyHNWeTRQ6\nw6mCXwMQRTaAvnELPik8yDNNf/q/55iCxjzEerwk5xT/kCckg5cvvx3WfkeJ\nOJVQtgu0Ssc0DB000SOclH5qp1vUfpvQlexpQsG/GjR3/eToI8tNCb6JanMm\nuMZMfQzQw6VoBoD4m1WVw+Dl/3Zvq4TtQ9AHIiSAtGrkznIZKXmfp1RAGino\nL1N3ALubEhDnXQe7YlhwqQn1K7i7b9K6krWM0UbmQcHerykvhxWV5kvBhz5u\nBUI/dQPIskZ/e7+nIYb7BjM+5u43Z7sPopjLuPfVuOR+CdbRcNtzncfCMqE0\npw64wv59UJRQg+hcZPjtS7y5o5Yi/y2/gOrD+PAGKABf9jA8VuXelE+dd4Qh\neEPXeTueZmE54jM0cKjOgtuI30p9/lbip5+W09yyRBhfPHPBIQ6vu++3/UiY\nLkUFuqvGmgyufRazozNhuLNugorfOqI2wsUjhJmDq4mC5KFAZdMhDhb+z6s4\nWQ+d\r\n=nMi1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpL2qdUK0GapOcYNTfDTAjLq9CtzlFYMPPjrrNqmUIxAiEAmPYMv9U/nJzH6FHjZDMciEw/Pl15tcuiQNkc09bBmu8="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e4dbf4d2651b79fad556f54a3b2c595f56676671_1593614152986_0.2650263367172738"},"_hasShrinkwrap":false},"0.0.0-305e8bdc7323238f839165a57f498fed3c339abc":{"name":"react-image","version":"0.0.0-305e8bdc7323238f839165a57f498fed3c339abc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.3","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"305e8bdc7323238f839165a57f498fed3c339abc","_id":"react-image@0.0.0-305e8bdc7323238f839165a57f498fed3c339abc","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-2+JE8aIGiOKDiO5SCUeKi/DvkVzMKO1EBJ3fr0dD6+KitC4kGSgjcGgLCrPJb4RwCwth50yH7V+MawJTcQyFiQ==","shasum":"41fa881998f16a3b760916149c2bc100d5ba1cfa","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-305e8bdc7323238f839165a57f498fed3c339abc.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/kDPCRA9TVsSAnZWagAApXIP/iZggCAJTIA635P+P4oB\nr4f6zw8G3ThvI0Upoyi7WwNkWGVqjdQP8xKsLQXacVq5TFGZpY+yDRJ0xoxP\n/KX2HPnvbQvZ4dKEPq00IKZ/d3wZ3P1LibUl3HsUEMhdCM8i+yNdVQxhQ6L1\nEJRbYY3zkYsgmovZwsw/a5XuYZHMSbSFHgW5gHzmip8jq/XAUrPDqZStf+Nr\nUbh5QyuoO3W8pdPhJEY+FYkDciRDTPq7MN2N8AF2IeyxLR1NMBTEMrg7tv7G\nAB2FByEgRWwVY5lXWE+lEGuuAd4SsAZXeVIluDMewCpNNkcw5fH4IpmMGz9G\nyPZ5cAvY3Y6Luy1q6j8TbKSlxsz7aIX1gH+/T01bB/ShaUVAJE/utMdGkqXg\nrulc3DgBZoQ4yDa8U8wP571tctfFm6VB7IJAGfwKHhI+FiAIUUooDoS5pmdi\n+/4c9t7tWD0N18AlgsuK1X6k7fQAF0r7WF8aRIvJa53TJ/7U72QiHsEh9u9E\nbcRse1q2hkkPJVhZLNyehzZYFtTHVdt59BjWGYqmp84Hmxff4adv2t/RGPBb\ngSIv2LSgwAebi+MJFEVV/wkcTc8wcWyC1lCi8RYSr12Pb78N5kbyKGO15wvt\nbTS3JxT+mdx8wy7LudoH3lJI6bH/BgsBTkH0kTuonU1RaB3MdEbGSXQ7alZA\nHn/s\r\n=L7Kl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn78O2LpgGT47JB+W6crGjZ1nViZANWWZNh8b3v4RPSQIhAOOWUr7c2X3YHMGuvqS/n0fixBdwypHZaVncqac6NCc0"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-305e8bdc7323238f839165a57f498fed3c339abc_1593721039271_0.36079625501384016"},"_hasShrinkwrap":false},"0.0.0-961c5036173f7b754a3d5e66b8bad7be9b1bce59":{"name":"react-image","version":"0.0.0-961c5036173f7b754a3d5e66b8bad7be9b1bce59","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.3","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.18.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"961c5036173f7b754a3d5e66b8bad7be9b1bce59","_id":"react-image@0.0.0-961c5036173f7b754a3d5e66b8bad7be9b1bce59","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-5ouezgvd4Zu1/BNrd+K252oQvr1Zxlkj+T6ngeZmP4g7+bDjFGr2eq3HxAwD4EGt+apG3HpdQZ0+6S4MgukPjw==","shasum":"9292454251f661182131832607b435512132fb81","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-961c5036173f7b754a3d5e66b8bad7be9b1bce59.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/7eJCRA9TVsSAnZWagAAgf8P/37JUC4ULVJuk/jZ9YXu\nH8kOZUr0Se1+sa23zl7ToXyLXUmkBk8wm6HIym45pMOidBFl7j8Zh49qYVdH\nV4tMSBSTqB6PBnYxsx1WRgK+pfDp3SsaIRbnz0hns9joE/7cDEsbSQawdbMQ\nOjtHXTaBzFoX/aYJRQfVa6jBbBOjit7q/nhvH3d3mUDo7OcKSFuNzoXZUloY\neLL6f4FY0EG3SmFvFz6ZC29Dd8JIJnjQp+H37ChlEzyhjzvwb4jLV5pGD6fA\nAd7I5mZqeI/EPWsRytrAQ/HCci2B317IRxIIjhYWSq/4dM++rfoV01sYjzvz\nboY5c9eUGeC1HTuwdtJgDPHVviWAQlRVVP+33tr4wBTtJ9C3Esm7Oq3aLAQg\nL9eQ8HBdnncENhuExUnU+VE7hrLWFk4284XSvIGWOaGLOz9I/RnISsE6mJk8\nAHHUWDLk16zjOku0A+8iihutCokAUde97K39KpUQvWu9iVvDLw/X6Lug/YcO\nD1nC0B1gJ/qO3VhuBs/XlqA67lEetcGrpaiooWcCN77rMA8RuuJM4LYPh2w8\n6s2uX+eWs0rlqCYPUUCySPI6Iioq/T0OpSzwuDf//nKkPSCQAHrBGzdnmaNN\n3ESzbRK28qd+l8QqfC93tnx0QPqZSXR16digQyxJOFwguIdMSm2yOaE0WzF6\nguDv\r\n=rSI5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHcE0zLvYHaB84oGVlU1eA8/ipBVIymloHgC0ksWFOuAIhAKQJdHptU3Hv9fCiHKw4mLoaxf5S5aAQDU4i33fzcy5E"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-961c5036173f7b754a3d5e66b8bad7be9b1bce59_1593816969167_0.9901136562989836"},"_hasShrinkwrap":false},"0.0.0-16f0fec21121ab16c9c5d2cf0df88908ee61c8de":{"name":"react-image","version":"0.0.0-16f0fec21121ab16c9c5d2cf0df88908ee61c8de","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.3","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.19.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"16f0fec21121ab16c9c5d2cf0df88908ee61c8de","_id":"react-image@0.0.0-16f0fec21121ab16c9c5d2cf0df88908ee61c8de","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-mBxoAnjOaxXInUY96gVGoWRZAF0SiPbAfvjNduuK+guXSdoMP6alW015EzSoIWNdY5coZW7tACvhAgcKYtG7DQ==","shasum":"003a490331687ca3ec3fb411a9b0284ea38eadae","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-16f0fec21121ab16c9c5d2cf0df88908ee61c8de.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfAtKyCRA9TVsSAnZWagAASSEP/2yVFPEOvxByNjJJ+Fyf\nA0UUlb1isr3yGDov9O3L9UhDnMV4MprqpK+1ZxEbbU1m++Hviiq12E86Bvep\nR23O0t0gXk2XubL+vnc8+gyPQ3e3f5wG6itdKG9LMvaNj5OVB5gxiS+cqZXd\nsLuD1N99Uf6FcIy6ip1lu0CHeBFRetHrpdNOmOLZ/e7zcEhjllbZTP4bjIyG\nPyP8/9U23ihOT//3qtqqbY9zoiiqUF2LNcN20XwnpmO9QOgPCkPVvtJoHTde\nW8fTB//bYNJysW5rF4YFsmDqAAYUayMHTAoOB77e+AH1PIuaHVt41aDxabxg\n5HXPAqZVjSuiHIrzVv0w8Ccdx4xKvQaZEfw9zsFbrA68hcwNx4kxrsU1rlDT\nahkQeOO+Ie+qT9auEeIjyFXlFdmBQB3IVKcVmimG2whFzriRsSJ21nSkdcEE\njHAPyrzLOJ02tC5W5/jglC9it8S8ommlpqHHRbzaX+V8pSfbgAV8j3gSj+pH\nelm0ioXviZSKc69qjpEYXuSb8IwWNJwhSrX+SbP+Az6fQFnThcZez10wGOmq\nyhcFljvgFmMQ7XBgbA/AZMY4jhHbehmLcWDoKebSP6dVtMCnXLPbxX3T6OaG\nMsF6xoUeAKC7l0ZJcq/MsY5NiFRTUsYaULKAgt8F+SRMvk6nsaGX7Wosmz6F\n/+GK\r\n=AyNg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD//R28USWfwho8V6HM1MVaT9s4RdZ87pEUjZgOz8KAJAIhAIpTiZMwjAz3NYR4kELxoB9cb9SmPpqHHrsCF2xx4p31"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-16f0fec21121ab16c9c5d2cf0df88908ee61c8de_1594020529611_0.2509562686589788"},"_hasShrinkwrap":false},"0.0.0-c0288d4f3fcdc810a7c4bfe9a773df28d9f6a6a5":{"name":"react-image","version":"0.0.0-c0288d4f3fcdc810a7c4bfe9a773df28d9f6a6a5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.4","@types/jest":"26.0.3","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.19.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c0288d4f3fcdc810a7c4bfe9a773df28d9f6a6a5","_id":"react-image@0.0.0-c0288d4f3fcdc810a7c4bfe9a773df28d9f6a6a5","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ilkl0P54EQcwRYjOZm5VNG8lp1EXS4FXYD4Y6gbAis7RzzSuXCydKWANdn5LwsNuWP0GmtiZnL2ArrEnb0ZLcw==","shasum":"60f8e5cca21907bc2bbd05126699b872c2afb6a6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c0288d4f3fcdc810a7c4bfe9a773df28d9f6a6a5.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBD3xCRA9TVsSAnZWagAAdmkQAJsCK09DLZHk+mILeCQk\nzj+CqXcr/JhmbWJOPYkhHD+wYPEF/PRJ1VrpyI/mOMSMApzAF14izffJ+w3T\n6idjWZGzFNKMKWtd5l6W9tZnG79/LrJtNik7qKFtZbyFzxmA6TTFXuKNS0SB\ngHtg4BV1+akw9d6UwtVAXKc6IJ9S7TO64G6amd6XTM292OMoqLVt13czNq9z\nkpQOQ4XTDT4vV9mxAJuMHLdjtymwtKu59qJMS3Z6Tpypk5gqkYPakaiKWBDd\nx70kHBGqZoj4PGOXcXYGRaIES1DVt1O9lyCu5hWEWYeiNlDxS+WJYuSgKD2K\nB1ibkqnvCoVNwWQLaFRWuwDNsdPELjnE9UDANWchXyK7vdk/vP5qxIsMNZGF\nSHfQnp7X2MJzNVJ504ZbEASiYBpvSXmgGGFP7UDYX+RfbeJrE2chDif1xzJ3\ndkZ9vuRbQwo7vStCO0xirVSVGAaGHMIC3kmvdoyQrP3UbL4umICEvNu86A8X\nqG56ZJdlnIP+czIAAG44RvjFl4WB4VIT5DFPjTNEJvYaPaByOTZ1qN4Vn7Wm\nLvLgnwPuqZYBY8ZJUxIU4nLvXo48uvbVoB7inj2EmTUmtteVMEpH/Aitd+7u\nGL0Dv90LeqBEw1WEAomtMlqzK55f4sdY5mSc9hP7E+oU3Fj/f0dl/82Uxiv1\nzmAx\r\n=3Xi+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX8zB2bK7PviRFIJx2TGiNxLgYqARysrFaehWMuN1r4gIhAMvjwaFv2aiaraBR04HGBlHuagk/vUdeoJSFJhdrNsdH"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c0288d4f3fcdc810a7c4bfe9a773df28d9f6a6a5_1594113520960_0.9053754555060964"},"_hasShrinkwrap":false},"0.0.0-f2991485074100bd2bc15bceb6de2054e8ca4119":{"name":"react-image","version":"0.0.0-f2991485074100bd2bc15bceb6de2054e8ca4119","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.4","@types/jest":"26.0.4","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.19.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f2991485074100bd2bc15bceb6de2054e8ca4119","_id":"react-image@0.0.0-f2991485074100bd2bc15bceb6de2054e8ca4119","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-5xkIFAhilz4CMIQAFU+GOr9O7YUvcZsPzAHkirqkZlJeqUmqI7cUYoxuexbw+tbq9I8XYAwnba0Qmqj/Y8yXEQ==","shasum":"1b6dae00b0274bb1869f3b391ff14f94d3a72ae8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f2991485074100bd2bc15bceb6de2054e8ca4119.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBb7WCRA9TVsSAnZWagAAR8sP/AikrnNRE6bilec/csat\nRWfL1Nfp5PS3z3VUEEMSTd0MCdFg93Qt4DH81A64xz4et7OLXfnrznYysBei\nniLD3e2WpoG+i0JO48sEHs8qDcXBKWiCvR1ItKOmJUUu0xEDU93kCzu2Rrxc\nOknSF98P3lK9GKlITVbk7xcUwKIDOOUhixLHvaY0juKoH8BhTw7N0/nOc3Aj\nDR/2J5L/46RKaI2IxcFD64DrO6AuIBMTkGdNSAg2lr0SwfmcisIBZwg4ns15\nxW6WxgNj6oIvco9SHQ6nbmcia8QrQYUc8yRUUUFGG0ikIQ8HCzBmqVws0Avl\nm1ApfoUYxTGF5pQr9LKfXvROpx56h3HH8MkJ5Sljm8VHgfxqdKnaoLaaJNNI\neQAdt2ZuZCdxeXCjc/1DWPMMj3PcMOIi0Jo7jKyr7tmvKan/Xe8j/0uMWVQu\nDeOFonlmHf7HPzkcvbgDohO06UjKT0PD7aD4hq4kWvqLAoJrmlROoJS8Sv2o\nWn5NzPRtUQj3kZjGrxowhd54MUr4RQyrItuHhZ7WC3fWzf07eoeUPildDz57\n/YYGlcu9zREA6YMT22LyZvjDC+2/aLDXHSmbimuaDHCkDVASQF1txP81L8XD\nNDcw37nfVbzijhl7XLhz8UFgZCWpLEJWA4lnh595d9v51sd/IH6fXE+LW9Bo\n12X3\r\n=kiQp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbeURObcp5yL2IIlUlKT8wq4AGcvZPuLtYxC/Bu3xubAiEAgtGhIgCA9IhinN/3HUpWTSWY15H9qRzpy7/IY2y+lBY="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f2991485074100bd2bc15bceb6de2054e8ca4119_1594212054004_0.053077989284937344"},"_hasShrinkwrap":false},"0.0.0-f5b962b84aab31f136d0485ed2d20f24514b2c3f":{"name":"react-image","version":"0.0.0-f5b962b84aab31f136d0485ed2d20f24514b2c3f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.4","@types/jest":"26.0.4","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f5b962b84aab31f136d0485ed2d20f24514b2c3f","_id":"react-image@0.0.0-f5b962b84aab31f136d0485ed2d20f24514b2c3f","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-8NbY+U9UZuGm964ixHNXYaQH4Eunh2coTDNd1ofSyyy11LJwkVe9II4QaFSu0/DF65kxJwuc1aJ31s0Ei7ZU3g==","shasum":"2e22a7a11796208e13e77099ab59ac9bf0332245","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f5b962b84aab31f136d0485ed2d20f24514b2c3f.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB0tgCRA9TVsSAnZWagAAc+wQAJ5TW/rRA4YKgvRwgk7w\ntEFFIHtxFP1H5Gz5/p2sy2stGwT1xnZheeOqYUsJc739ywRYw2Ymr3uXAdqy\n0i/fqRvYL7xypV0u1lNhvwS4kGnon27vXh4GSxCWU46dUP8u5JoLA7htpKqT\n4gIeYk09rRswbQbNaqRk+uEKyR1MMSaGxJjvuuMfDx4q8Gxdxi++YyrPRw1p\n8U3VNzpjVjZgmNfEpzJkcMmV2WOzQguSE5O7vjV2/7ZyCYeqSIT9oqSD5dbK\nDAnUoC8xPXBCnLN6oySfj0VN4vlugz+e1d4BI5Lu5YCm7dok+XtHXmw6a0zj\ngLLmzfvcs1FihphsiFosBnxOuJNCS0UUNY/3OdE21n1WHjCxZSvfAgWJ9Zcv\n3L5tegHGzgKAlt2M0Ujwuwh/8UISiwSZq58BSiBDOfEYO1BGPBEj40h9IPWw\n0lAVycNDdzp7ajz1eJ2wcNQBLYv5tGUGeVkWULEvJS8pDEff3rSlHwENSo6b\nS3CEb8B5fiilDC132rdR+YcqrXx/nls6M0JS/xwC+j482p6lscEA3DfXKgoD\nSYEq1Rj+KrEhpW9v7ZVKmtWtFgXco3i2YSwBUonT30H7qi8tjB/wMCqKsThx\nVLh/vZ1osicFwI7xUBBTYWZ3qMFv/m8/aBZK49WNCTxakuyB4CthJzj4MCUV\nGnwN\r\n=L5rE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGUdctDAbmybVEy/I173MnI0bZkgM8Vq8mTiABvX/BetAiEAndTuX+amhQB8vXR1ADROCZ6g6oyId9VkNIP31Cp+Ax4="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f5b962b84aab31f136d0485ed2d20f24514b2c3f_1594313568175_0.7085051684921777"},"_hasShrinkwrap":false},"0.0.0-5c3c0ce2bda72046f8b87641680c0b4f90cdcb14":{"name":"react-image","version":"0.0.0-5c3c0ce2bda72046f8b87641680c0b4f90cdcb14","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.5","@types/jest":"26.0.4","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"7.0.5","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5c3c0ce2bda72046f8b87641680c0b4f90cdcb14","_id":"react-image@0.0.0-5c3c0ce2bda72046f8b87641680c0b4f90cdcb14","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-gM6KbNcqltZ8Vhsci513zzTHEZzXpdJqxMUMSIZbCEIu6Q8Tr835x2uGvA3fD3kq25HTgmYEQB2b2T+nJAA0Ow==","shasum":"89f127d8f9ceaca11e9346fd304562ff4e86e989","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5c3c0ce2bda72046f8b87641680c0b4f90cdcb14.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLUgCRA9TVsSAnZWagAAiwYP/1rXz56bJSzbPHoNpfde\nr0A7rP0+YGXWB0w8r+xoLiL0/f3HRhlRH4CXkwFZM0R9S0bPGPOLGGBII7Sc\n0slKhOa2G2LfudOHLOcLD2aY+JYsBLwaAmVAGD/S1QBR1MkBvHeQM/sDxN1b\nfaQAoghgfNJg2T7R6GW9914FudJ/eOZGU4Z57bTVVn06GWzS1QewSGTvg6Y8\nD4V2Us08YlA/csbggNRAC0UqKWItnhL9XYVFPZ4dMYXx2BK0CyIPu4lbmYlR\n0/Ed49ubZqk0osOaNxz1F9M0TGjsvVJ3Ehuv67EqesQk/DcVGZk0L1ymzkMU\n3Ee1VWaKrdf2LmnzEXQ2m5TQQ/ajVykYpVpuMpar4jH6oFr+MSlnhd+tAnka\nFf05yEmiHOyfO0eEkG1YO12qe7IIduOlfek97y7PQL1ANn2khfl2CQsfCy05\nz5TP07/BP4f4Cw+ulwFdiglPXu8/5x8A5Fn4bmiQ7X+PA5D8YrOjlMuN5yHR\n+w6IEAf/QqV5MPZLpVJODayPiGQbF6qJt9a6Sw/0zyy/M3q1aBAIHA9eGZ64\nloI+3lnHAwP/0ihrJoY4iEqdEzWQMiwQZMbbgA4dSki1Osh7o+ylanWAY/Sk\n4qdY3fX2mkfTsUgM+fCtM6wEkSREGNhwAStfTvZPxObO60e/hwLS1LH5cGUh\ncuXv\r\n=sY4G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXQwJayxpm2/TkXTHcGGTzQ1RxurRvaLVwZqv8MQ6ygAiAuith2gZ8riKdc/ISH+ziF+iffKPtVNyN1rSLGfDNPhg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5c3c0ce2bda72046f8b87641680c0b4f90cdcb14_1594406176290_0.7402534029696812"},"_hasShrinkwrap":false},"0.0.0-576900502563b4fa9cbbdc5f944d82ae20414d92":{"name":"react-image","version":"0.0.0-576900502563b4fa9cbbdc5f944d82ae20414d92","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.5","@types/jest":"26.0.4","@types/react":"16.9.41","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"8.0.0","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"576900502563b4fa9cbbdc5f944d82ae20414d92","_id":"react-image@0.0.0-576900502563b4fa9cbbdc5f944d82ae20414d92","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Ax1kKcZdeh/4Loakfs1mIy9jR3Z4J7UHssAgUhsHe+WTkX0W114COzMyP3dEY7HY5/1k3+/sO9r4mQ/BB52K7w==","shasum":"9c9dcad894797dd9e81b0d9b300bbb044f191a0e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-576900502563b4fa9cbbdc5f944d82ae20414d92.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCMItCRA9TVsSAnZWagAA2YgP/1/f43X8ZK74Cprd0YHg\nMIPoHTL83WxPGxoX/Pkf+k/ilp/x6gZI5pLn8njbcPpqLH05CJ/GAYbPPGMK\nwrXQoHO5DPgAtwy1IAruB/cWetncfzdKLxerSxF+jWQV0f/9M52AW3WV358J\n8HjV/wjXPhiH+Wvi9oU5NGPOXcFvUcxWt1L+Cr3YHgqnWvqAisEEX75C937X\nn/cnTiBBhlgMMPg8QxF9rffLKEao/Jn3fk8XeH7ocqviUEUF1Qqyb2Bu7Is8\nAJ2q402ELLb+mnUdDSlMnyQkdricPdOsEMsvbcZYfQLu3y8LsgLNU+lpRWnC\nRSBnyzyNklZW5PclyI/gLMWDYfpGOOieGQY8bHBiF5e61F0dQY/5Vo7QK7eI\nEPUXcEuqzHfE2V/8tjlgha6+qZoSnxOJ8PQyu+KaD8J4NzQERUpdwqJQ7J8F\nh3gQ8/jtETBRJILX5rSUOtOMnn8SSvjNSOzRm/CexGylbV7tYQeVQGW749No\nibOJI/ra6eIew5pU5oM3F2KKSpPxieSDGsVjt6o+A6M8KmnW3V7Ays8vuwou\nT2V7Bls8hQsGrecatar0/VOkZgB0O6pFFdCnLNQbpiQAQjXEyU5Ii4rZoKUI\n7tl33FXXhDwwRSccau9qS9JnA7RXjCygI2C03kwbFLw+cPp29ilawmxr5FXZ\nPmwx\r\n=OCY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBf7Zrdz4CTvVwE1wKksB1tcZ7FojBTcuWxRvSyoDYOnAiEAyWUVEvVSp8eQ3fhteiZ8YZidwMjPqy7Ns48ypMW9WiQ="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-576900502563b4fa9cbbdc5f944d82ae20414d92_1594409517393_0.2445678233913331"},"_hasShrinkwrap":false},"0.0.0-db3a39124701bf9071d83ef7a566a9beee021fe9":{"name":"react-image","version":"0.0.0-db3a39124701bf9071d83ef7a566a9beee021fe9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.5","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.1","ts-loader":"8.0.0","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"db3a39124701bf9071d83ef7a566a9beee021fe9","_id":"react-image@0.0.0-db3a39124701bf9071d83ef7a566a9beee021fe9","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-b+jX0rUzKpTYQRGmY/IqerFBL/7+RU2IaU3WxiT+uASKsQacdOAd3KrrIDAFYJDuO86M2lb/3IMf5E5N1uWXSA==","shasum":"f6f1c37eae1ceafe320b9c029807876982206d26","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-db3a39124701bf9071d83ef7a566a9beee021fe9.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfC4okCRA9TVsSAnZWagAAbbcP+QDijpeMm6eK9OEKjPrB\nvuzX9OgQWqPtoussJSKnLcBD1G9Az73LGPFcK6MJ79H3PwzGEN+SUg4NkCGn\nyaW4U/zlxfaKXOKPjAOhDnGwteIKPjEydx9y3ZA/wZQM2tKWnsEI+z0/nFV9\nNtzmWd9SF5cs56eVGlzvqEHsdQRg4F9q4a2bmzzyv5Kajf+BtuchRrUo2cSH\ntrFFz3BLwin4GjHm59QkMyxLgc8G5Egcq0mE4phOnhi0sY8EErCuoradDJAM\nPAEjF+bSTd4fTWWHeMm2LVjTu8DfGWFBz/QIhpKcHVc+/T1Ud55Dk0mepmcP\nNOKwgZgTTtjSmquHZ7ngwHk3kK8eEsyCt2fSeEoY2n17DzOPy1cV29wY+vGQ\n/hLK+nbk4RFRe+KcH8pha8w4wBtYSU4UCUkBO4EggLqbODVvgnN8oeyB/LGq\n+URFFvDvbKfuw9D9HsDMm+Rh1+J/lGpT+fKVO+Lcagi02rbGMMiJJT7c5yPe\nMAWEyKId8m9zXoCvY31HYTaz6ML4QAdy4R3+OQN2xslJ62A5MTd0B3sIz/lA\ntTWlpiQ8AcKg9S6khvgjQF58kbP1nr6EeBjOHv+/RRhYDywWqKmiQFZYdosL\nj0KHwWowFOx+7Mz+B64Icccy8KRO4Y5WuQjALTVmhqDGwgS+eVwAtr3V61O6\ndc5C\r\n=Q6mF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZt048ci7GDFbtAuprypsA0bXWq4+2pgRW3zFc9Ih7SgIgO2i7Lsp12HjKS81QoxqcujW9JF30IcfNm7WZbuKOlyM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-db3a39124701bf9071d83ef7a566a9beee021fe9_1594591779372_0.7045907671828116"},"_hasShrinkwrap":false},"0.0.0-8c06c3ab833c37d82ad8843834e81c0edea340cc":{"name":"react-image","version":"0.0.0-8c06c3ab833c37d82ad8843834e81c0edea340cc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.5","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.2","ts-loader":"8.0.0","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":"7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8c06c3ab833c37d82ad8843834e81c0edea340cc","_id":"react-image@0.0.0-8c06c3ab833c37d82ad8843834e81c0edea340cc","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-3IiFeuQqhhr1RFeJOayITlKRyy9YhVzbCNqlyOWOksSMaIfjHkUK4uXJvifiHZz1CoumTmF7r46tYwmtVL2KMg==","shasum":"96120d47bceb664e6acea8982d8663590bfc1ea1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8c06c3ab833c37d82ad8843834e81c0edea340cc.tgz","fileCount":20,"unpackedSize":37935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDboHCRA9TVsSAnZWagAAyFAP/268N/Q2ITeBrr1Jv+9e\nkbsGqDCceVawDcICE8PhO10F2uLKxZUqodw3dstQ2X8MvMhA04R9INNrqDeD\nHYp73HntmWyNfIjDcyXmiNfTw3T9yW/uM/sVrQ6/9Cp8S2AvoH0B8i8wi2Lx\n/o4W1WCW0lgmRWnYrH+sx+lyU6JWMfiYbWPgQ69VrYztsFEXQPiL89jKfkI7\n8YCg5TRot/4WH+UsO54zgov32EW740PMehjrCUJYL3Ut+9yAAc4mFYUIhn3r\nK3tfnWoOO98pKZV9Yl3t4Aez6y+PDp0Ph6IYRCq60V6Yx3gxRYDZM3et8tPX\n7FaTObP73BYXG7OT+NKb43I9E0ODFkFQ3VgZj6U48KYAjMZdnMthH6H2Rb/F\nfZ3zFr0pm5FTfSrkgl0rWSY0iSPnjHU/rzvcGSaLwmW9voLW4Qkpp3IyF6j9\nypK9elBCdsTz1NLHtCzaf3l1LCXaNbiJuMeZTClxTJOqtvDpf1boeBjmb1Co\nsM0O91jx8ZERT4lEfFhH9c4no45cfwRmz/JbVVTnR+lqEjjaH75iIwf4n6Wf\nM3zDZV4BUA2mwVDAKvMa74+FTY7kpWcwDZrZSCGFZ+6gKIP+ifyUMFfVj1QU\ngfHPIp5EGSWtaOuQVaA6uAv10CSb5RMh3gEfjMXBBjOG7qmiVuRJxoFz6dps\n1/iD\r\n=U4E3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCztJDxyvxpI/waGA9/7RUQiLbZ2usTRuM++aTAXBSnXQIgIOmJoM8mEXT4wZIWZyp25oDDnp5qlW2DSoy7GbxrknM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8c06c3ab833c37d82ad8843834e81c0edea340cc_1594735111192_0.7668227409678499"},"_hasShrinkwrap":false},"4.0.3":{"name":"react-image","version":"4.0.3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.5","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.2","ts-loader":"8.0.0","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"gitHead":"cfb9b14962423a860395fba28680e5817642a331","_id":"react-image@4.0.3","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-19MUK9u1qaw9xys8XEsVkSpVhHctEBUeYFvrLTe1PN+4w5Co13AN2WA7xtBshPM6SthsOj77SlDrEAeOaJpf7g==","shasum":"6fa722877660b67295298a914bff1ed87ad2cf83","tarball":"https://registry.npmjs.org/react-image/-/react-image-4.0.3.tgz","fileCount":20,"unpackedSize":37948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDraZCRA9TVsSAnZWagAAWrAP/RxW94wrcGBbYh9ddgZt\n1Q3Cedc8aZP08iWZ5OkXgciUcbIc5ObqMoOH7v8vyQC7DeiqRlVI9a/y/FOP\nQl4DL2Jxa3EgBAc+sIFfBHYDIeoUIuL/W45Q8CajWVD/473sUCXsgLpOa/bG\nSYnK0kBZmPSLEbLLQmS+9Wd2J4iJzx/qo2L6EfvAiXsVWOr1Hqo+1t3cmiwl\nYTnH56moonIQ2maVnRrCIyS3nlHxHTj/WPysZSHv+Zi2DoSVIvXLLSYWi1e4\nwf3lVpJnoULUiCg+MKvbeadEBiEE8Ygot2oKX3PlJlwu+LoqDWPxN8UCGpU1\nB2D4TKV+pVeJ3FouEMRGM2yBZcLLA5jdVYGKR/pgse7HeaXXt7+OZuXdjOZw\nlpORkAJPLw71xy/I7RdsgdyifnMqilywpWuJUinXimPqC5HtSrYaltCi0Iyk\nZUnNN3qtCgZxec1guu6TmlddVrw3ChLkJzvW5/NY7uQuhMdUMqzWSI8yaU6u\nMlZGXZYADuOPnJx+s/YZyFK9hE86iL1dyAVJ5Z5VTUEKQy73AQUkDcV4+WAi\nDUzTH2nbqyG+Ofst3IvVf1FTNCCNhnxF0bggQ6uuxQTe4xqdqfH01A55JzD5\nlNG4NwxGJetWrG0SVNhnBeKcvk1KA3hqUewIutnc7CRySjh9PwVfKLgZjkFe\nxmuL\r\n=5xkv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEjqXu25eyWsEV+tQ2ySZWpTeIEZ0zHwEM+kAvTAimY3AiAS/YCFjTDKZh4AMQsg87/3h9REkZmomcW40JKbsymeog=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_4.0.3_1594799769153_0.3004631637546409"},"_hasShrinkwrap":false},"0.0.0-cfb9b14962423a860395fba28680e5817642a331":{"name":"react-image","version":"0.0.0-cfb9b14962423a860395fba28680e5817642a331","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.4","@testing-library/react":"10.4.5","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.2","ts-loader":"8.0.0","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cfb9b14962423a860395fba28680e5817642a331","_id":"react-image@0.0.0-cfb9b14962423a860395fba28680e5817642a331","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-orEh2C+4FuiF/Gx6Yqfre2NuRYn5PWBbxBIQMf4wF2Z08q27hCpW1tBWCqp88smoAzNl4c0ZcJWZD+VueOo5Sw==","shasum":"320fc1d43265e2642f07fac79751d4a355827734","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cfb9b14962423a860395fba28680e5817642a331.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDragCRA9TVsSAnZWagAAOckQAJ1zFRL6Gs2lwQsxAGz6\nRaI7cO3NGabnn5d5ny1a05FSqSFzyWqdGESrZXp3F/sD433tAQ0j3PwDQeeo\nfPgtmgLtVBMbhzOoBX7hUFrqHkcZqGZbgY4A5SdR19PEejEdHi84SRfodJvS\ntKnV1l6+te6AXbjCD3POVnZx0X1zU25z8ru69UMyJHwYKudAUyFbx4z9rOqS\n7e1ZMR5PAvtWt8uUoSNCsC8xf5DWUA/gyRnAVCmE2RJhnj5CqbRf7u9wV+qG\nR9Wp6jW5ndWzEcsSQe3Gr1hlVFIOtgwT03HRz/lfqKBe4tgUL0ZMtMD48yxC\n2dBRqr7AUkaoCVCGVHAiza4I23x92IEcptXdrsa9WWqnKPAaUWQT7V2d+yo3\nKWV8LHRzvh0tftE8lARDRCNxElJDXEyxUq/PgEi5i5b7s54ZHUHQosEcBn26\nNfeoz8WjDuOnJry6S5nntflB9dB11BwbLTf5EsGuNd5wRgEHzfbcTO9i80Lt\n9V6WAEMwvWR99lXd1dZKBzdcAkj5URaDE9PAE8U1SdywihD0aJEB6A5hHla0\nHu1O5eumFddIZI7b4mMbrEtb9JPV8NI9KzF/X2zxwdytZHBlc8LzuCoKKzkW\nQxBeoPT6+04XqpnpmeuRmsvYz3nPS6TBEp6bkr4vm/hrNYYo6C+MQqxTp3UJ\nNg2c\r\n=T7zj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICeitVQqQlTfe9eJm9lsPnsD2E6Njt0cWHUf0+RzzL56AiApYou8Jnc/NXu02v5wUmH6xlX1vYOkt2ZGLNCeDJuFxw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cfb9b14962423a860395fba28680e5817642a331_1594799776397_0.8052285124664156"},"_hasShrinkwrap":false},"0.0.0-81f6e7cf6b4d96b50dcf420c2d1afb5bc6ec855c":{"name":"react-image","version":"0.0.0-81f6e7cf6b4d96b50dcf420c2d1afb5bc6ec855c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.5","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.2","ts-loader":"8.0.0","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"81f6e7cf6b4d96b50dcf420c2d1afb5bc6ec855c","_id":"react-image@0.0.0-81f6e7cf6b4d96b50dcf420c2d1afb5bc6ec855c","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-w0FbBVaHMMQeb/SyHcGaEhLbyQqPaZskoDw8y6qOHA1UbNF9kG+0V3dcO27JtcT6CFpaOvQD9CYHgU3Qq16kZw==","shasum":"8a7f569c0f8b5097f1a5fe2100441dbf551d7b3c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-81f6e7cf6b4d96b50dcf420c2d1afb5bc6ec855c.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEB3fCRA9TVsSAnZWagAAon0P/0+GaEIxDEY4XRSEslTG\n1p02ckGmp4BExMbROgZX/l3cXYG7+pVXezVOlxDPfOySl06jLkAYpWu8+5He\nmohFwbNNGHk7uRnvinXDuLWbJOz+Zd3J0chgiaQ8askCYoujiRpOx6sNTmUN\nNLKQK3WpE2PJdkAb2V3WGs+ZJSxIJwyGB0zCAKtQowSvHI2E93nLfC+GlMpN\ngfAOZlk7ceBAnCa998revjC6WAeYm5I0pXRH1ICpkRF3y+HYhQgvxAEdcRxR\n/t0KxeOY5UJ/xj6yEgH30HxwlcC4HZplepeZEpwQzqsbhZxBjnNZNgwSGAH1\nEQgT+fXIwo5kAiokjcSYMw3uv+4+1bZKa4ELDG3Uzv6+RTet6RttikH5nQ6z\nnQxHNKNIlTbR8AOkJhKNZeEKUnLgGZaWMqQeJ7iJxCcrGc4JqxCi6bAP9XkQ\nBJxXsTuS2qGZcld2LPzrh6LEn4TqG8U2+AVlI+VZvj6JbYkmFM/jZ1FIpcNe\neZcf+fawPt6ZOEwkQtYgNNitEwt6qNdVN+1J1Z8epIpraleciBF9+koZVQ+X\ni/eBQeusnh9F7AL0wRTMkjx8B6VWSsPdZvKAvfNo5SJbZfwqhbcR0PHFQd94\n/Vu5oT9yM6CFZI04lglpuP8TrMbqvUnOvZUkFlbloBtymHAm5sLG+gJWJBFH\noyyf\r\n=Hl+C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOrCn+UagCxQNiMfp/03PkU0IoACroIVLPhDlU/9w+ZAiEAv/75EUsgGwaPm9eSOMq+W2NDAvMrAagq1KwFOyfjwTQ="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-81f6e7cf6b4d96b50dcf420c2d1afb5bc6ec855c_1594891743309_0.16933433934921505"},"_hasShrinkwrap":false},"0.0.0-8561ba5f18f1aa2d364a069f8875cd085ad0ec58":{"name":"react-image","version":"0.0.0-8561ba5f18f1aa2d364a069f8875cd085ad0ec58","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.5","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.2","ts-loader":"8.0.1","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8561ba5f18f1aa2d364a069f8875cd085ad0ec58","_id":"react-image@0.0.0-8561ba5f18f1aa2d364a069f8875cd085ad0ec58","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-MjJbP2lYJygTv7yaokYb03a8m1ZyXpjGWUPE1cBCdmRbXP49wxtiYAfMylc33qYrt+PDJrOw4Uq/HIdAAppejw==","shasum":"ad4adefebf1e3db981dd975d575bcc753abc8fab","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8561ba5f18f1aa2d364a069f8875cd085ad0ec58.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEDJlCRA9TVsSAnZWagAAa6IP/36E6skfZe6jtMPrACH9\nb05pA2WlyLJbfViGZb4Fza86ycHmCcBDBOBEtYhQEK10mcFPplog2jFsilXp\nOL/e2qGyfCuFDkDBUeH4amW/KUiEZRHu/pQ5AXkR7AaAsqGvifnRBT4DO3D/\nMDgNLNCkQoSZJFlMlMW8Wb8s4sy9blzK51K+ctoCJr3/TJpwnw/O2ALWhm7z\nnbtAHCSvie/qbUbiaxQp+/3r6oV+56bFGuni5ARuF3skr/BXR55q82Aq16di\nK/MdBc9khZ0e62qKAquDr4JbPb9m93JeLM+JYvswTV0rQG923Bz4PUcutt64\n5Pr300aKw2xZ2CXeSRcrguZ5pgb3ZDtBGpSbOYD9r5DkFKR9qQXdatjQi9x+\nrLHFVeQwZFJKrzY/wqGZaQfrAxMU/amZrDSdRryR52pa1jrVOCkQPA9l06Vm\nHjOmoZI4HppGURhoLpe7R8usIXHWAACIdHfebtsGLYiKv69QtNDJOVDjPh7u\nqYeO+EQD/9IzoiMZIHBKyKz4QqS81wBSjzqtv/uxWNjnPuSj40a6zTuLlRIv\nt0Fnbv5Jjg9DzIxYTusmbdHazsPGtn4gY+WGGJ2RaIJsQkw/DZUV6ruSG0gO\nHPIeLcxnotzLXWwCFgOJP/yLvLdrXn2vHknEjFIkPsid62r2VYLl9E/VWdB3\nBbVw\r\n=F+5D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrHIMJgqd+bgGoYzy4Ffqqj1HofiQDQCawXzESdrx66AiEA/qf6fdu+vOyuKDLfoAZBS/TD7YEuLQi3wwshnztMSLg="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8561ba5f18f1aa2d364a069f8875cd085ad0ec58_1594896997073_0.21895969014154693"},"_hasShrinkwrap":false},"0.0.0-9c2ccf1cf9431c25c186e12799f5087d0d1ee026":{"name":"react-image","version":"0.0.0-9c2ccf1cf9431c25c186e12799f5087d0d1ee026","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.2","ts-loader":"8.0.1","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9c2ccf1cf9431c25c186e12799f5087d0d1ee026","_id":"react-image@0.0.0-9c2ccf1cf9431c25c186e12799f5087d0d1ee026","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-RhH14P+cM5TVPaa5hbR2Auj1IxQqhn3j2kvtOtSRdU4Xjg9bsIW9HfXvDtp0NGm9BLbR7ZoRwGnRGSz007rDMw==","shasum":"66fe8558a0f4d49c0ad66ab9d3e8d3650f8c4975","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9c2ccf1cf9431c25c186e12799f5087d0d1ee026.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEav5CRA9TVsSAnZWagAA5q8P/0n9cO7mSZ0m3H59uU2X\ntgyAIuVw3cT9WXX16sZ2RsOBaKx3cEKE3W7zrhjmJRuBdyrQ99wXMhP6Qqvv\nFP1dI4fh5GQsmj7SsTATcEWuYsIHt5vniaNMcw3crV6dGY6YdMrAZXtggkmU\nobYKyv6SeCylXIo9wQXd5dAYrt5aXGnREzpeKyRtJZNh3Mi9C/IZHbgqVA0P\nItY8qY0Avwb+ag5vcWO/+Y5trWdX4PkOH2UHUNE1Nc9CubUEmjC5rw/t+5B1\nWDc3gXl+QCyrjAfwN3A7DAT+btaUravwaexSWvaKJ8TMuPiEgEXykmCdIoiI\nueJM8ksZzHgVTPeo6EvLaoPuiEGhYNDIWGFovfyZ1in/DfwNm+bMOP36FI/B\nOFw435iF8+CCUfKAReZiGJEqwOW2IpXGmbggk66NaRfGxLHMamKEQ99NQ/R/\nnoZSsjO1TBdDVpZ9rFtaqDRV8sP1OZHnh5SR7wn+0MDS9UskePCyrjLOKk2S\ne+iGzljkJxrDlR6h5xi0D3p8/VYz7yACL5x8qARKjDOW8IVCmUZDlFOHtClA\nzQcGYdzsDiNP7+eNXjNlMIZYaIlT32N2HqDGvXKMp+CU0Wq/7w5aJAaor3DI\npy4zvjSGbC07qNAv48m3MO3BZtt9CdRF6Lf3KGtQUFFwpED7fPir13hJqK3Y\nuxjL\r\n=hF+g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGbbtngU2m5lLwBU9wK2fr3xxqIHcdaAwDO+VsZuXbnAiBYcMXvaZ43NXGuKjpTYpd4NPdLo91D4oNcDJvIpPXaNw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9c2ccf1cf9431c25c186e12799f5087d0d1ee026_1594993657043_0.6683709629334273"},"_hasShrinkwrap":false},"0.0.0-a2d0d9b474be755a74d70d9b24c53b68fff13b60":{"name":"react-image","version":"0.0.0-a2d0d9b474be755a74d70d9b24c53b68fff13b60","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.6","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a2d0d9b474be755a74d70d9b24c53b68fff13b60","_id":"react-image@0.0.0-a2d0d9b474be755a74d70d9b24c53b68fff13b60","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-T8yY5GLl18BWh7H6neuLaoORHFuvU5BPQZQ8y13O291GEm2dNagviicPK1Zyn2J1KEsVM4Lb3X06uY/FOAUmlw==","shasum":"b1388f54eb787187dd3f0311965982ed79046ce7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a2d0d9b474be755a74d70d9b24c53b68fff13b60.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEw/oCRA9TVsSAnZWagAAidYP/j9fs5eGQRW61SEzh6zA\nYQcV8sWlWeK0kVp5+ax8TVHlSTJCgJkW9PKIikFd19Kyz+0tH+mQ9Twlnw6R\nZ6FHIYPZV5It+5kme/IbiJcoRfX65YkHCHEoP1FaDme+WP9Cfm37nv9oJcAX\nm6MujMPbHyXTQuZPvaiWFDD5F5r58eZ9UMPknfgnxFEOiopeFBw96aaIPkjq\nN/pxRwvc3Gqo6yIhfxbSGCXVYowfCN4m0BDdtT61RzQr4hCrc4236GxQvhIo\n4lEDcl7Tc5hhKY91O/r5VyW7PRGe7K+RLzRnrlqBRDQX1XlyoVOlh2/jfzPG\njdmnZ9kAUbHqwrWWMnwZIllIPyWV7tvqzNhaLSYPVGrC+SsbVHCb3h9Z4ZOr\nvXmVjdnC8xmeEapy/IWvh1BAJXXFSf/4pFgwJ3TZoFgFTCZ1RaxzdCUOM65f\ndleVJzKZJlIVGifqZPMAwBIKxdPqSBVBTOrnfSQ3/+SqCzqEFgJXgjSkCwK1\njhvp2CqpIlG9pzfNYGgcbt3DyL6ySksta9aZWmuFX2h6S/KpYVMoeEX0bMFw\nTw46Q/gUzFvfxAv7LiFK+HKw6Xd7wQ6TeUMNyk0s0XKAvFzSWBLZs85ioiET\nItvC5vVBwnJnKp0qBZ61Y7TmWdbbKDRe+iP/3mhbdVHdCoxgWAKQ5KbDaXcD\nq7nS\r\n=8CCQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6RU49Q8YKfyt+rhpfiuyHrI8oro5EwOZDymtVAa+vMAIhAOi21/0uHbbu4H7JxZb70vbcE7A2AwTsVXEamNv1a2h8"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a2d0d9b474be755a74d70d9b24c53b68fff13b60_1595084776227_0.6524281283291156"},"_hasShrinkwrap":false},"0.0.0-e5c2a0b996a2bd11f9aaddebba8f8133acb2215c":{"name":"react-image","version":"0.0.0-e5c2a0b996a2bd11f9aaddebba8f8133acb2215c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.4","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e5c2a0b996a2bd11f9aaddebba8f8133acb2215c","_id":"react-image@0.0.0-e5c2a0b996a2bd11f9aaddebba8f8133acb2215c","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-eoXWrEdSNMQconeO//N6447V+7ugd4MeELtu3CPRh8IuZqFguBsrqqeGpFVeNKVHFrs17sqIgCvoUsprboQQ7w==","shasum":"f837d4feed550e582b841e62cf5154ccc8185093","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e5c2a0b996a2bd11f9aaddebba8f8133acb2215c.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEx6HCRA9TVsSAnZWagAAgxsQAJkdzWKV+/KM8mit+dty\nvFESGFZk3mPf/ZhwmWwNGNmW+6zkDRKnnQNkfkICQSCcjKCX/ZfFdH3XK168\ncNXkUrLmDPGGYifWSet3861/8dV71vHIJJdz1kVR8U+XWN1P9jZNJHMHMAJu\nEQkwI45tUb48M+kbK54fQJuGhEoj7KDkxYWZpClydNjOtw3IDQNntk84BXvh\niyA41zLO9gw2wSE41jn7wA9pVIHKUdDfAmE1VeJio0XvHlbKxpLSSxy7zHbX\nsCWW0ptLDppMAdrSDDcr2PmbIGgnZs1xfIG0407y1XDhpHqe8kgwapvXJ0l5\n5ekEqJDGnTzgrF7Va4l0jlhj+xtr+EUzMYAAfSYoip1WqnzeM70S3Q9Ub60P\n/HyEPUNWzttHXb53mghzAG8WoeMDhV6dg23rWRgYuMopoI8xy1uOUDWWiyiB\nhRwjavremGzpOaZv3Yhv8WmxwyaW9uP+owg0tilUjuuVVneVeMWPwU8aa30V\nxks/zbv/M93ydvXn011zVHbIngkmLIbjBHnOfwR+5Ihf2oCGiHQiKy2EqqS3\n2fKdYVkJE+Yl0Y7astLLcjSXj0T21wDLPrAHIKJhHHdALv3G6nCy/ZqbfwEP\nK0MQwqjQ9epFGSRlg2HdXzU1Iq6wqxkwK+LdhFkK+S9ZN1nNo/yuCxlUmVIq\nJN60\r\n=IsFi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHgtnld4sQo7gVCj4UFNIpLpeTNYt2oRNvdjoH4RoW9wIhAId38OvSCSIhihXty+xqk18bgprXkqP/rLU1XVS2xNML"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e5c2a0b996a2bd11f9aaddebba8f8133acb2215c_1595088516564_0.3959842450802795"},"_hasShrinkwrap":false},"0.0.0-4563ae7aa96c250f7f6ee469f650ed71b96f05f6":{"name":"react-image","version":"0.0.0-4563ae7aa96c250f7f6ee469f650ed71b96f05f6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.5","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.0","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4563ae7aa96c250f7f6ee469f650ed71b96f05f6","_id":"react-image@0.0.0-4563ae7aa96c250f7f6ee469f650ed71b96f05f6","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Vpa5JyH7mvxTNTsrDYrTWjABiUiryQqig512OaksRxgor9c7mbrNlKSRozmJKF556+rDbRXvUlT+Z6X7Jin05g==","shasum":"00be8febff0d8e421dff9b84fe98791dfb94bfb1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4563ae7aa96c250f7f6ee469f650ed71b96f05f6.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFI4VCRA9TVsSAnZWagAAAbQP/0A8g/fP5njznmVBQa7W\nM6Ce/z4u0j4qbfBsJlzXP4kW6TMtpeZLDDy/+DwkNyHSgYdwCc1CtEFM20Hl\nYm27ljz8ZvDwBFiCUDRl/iHXCXBvvVMhCU9E6z4Z+V0iseIoG75hwBFFhTtQ\n/rB5hmv7xtlPTndh5KwPaGcpWrATnQDCZgbmmxDZwPTadxswOqDLwe5UopfG\nOpFsWzFSr6RsIEA95gpIVJf/3fSHLhFLkHfJH3VJWd6tQA+gltwKeNit0enb\nNzPpndWfLoOJoHvq8wFd+2bQ2xwPtLbNDQCYTZ7Atdx4HIXWwY8BUoIuoKPA\nO9uFQ1U9Ra0fcFA9jh0KE4aur+IMinVAFf/9FwvTVsd0NHM7i7SqMeWkMELl\n57gmLXLijDzcCT3d+aIhryC+9sVqDoh8j+2nBYeJxTzm4tn2pu66QUauQHWR\nFjIX9oLuZPGTtM8oPmMd2WHtteMpjz85lYDCAe3VSk1iJtysiNCqovvn54fW\nf84SjKV2rldmdwSerGguDdu9WU1gz3a7UB91R2bww2Zp+5/XdQGWUDYmbddT\nT/+pdpm0R+svllSZfbRd2D/HImJK2gIIZ6Pw6QE9mcrhNem7Zqo9rrNT5n75\nRidNojv4N1CdoVy0ereVGhe15tl0+b9toYNi4sMQcHG+W7+gYcULWhNiuU7S\ntd6j\r\n=a+ju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtIAZXt0seXmfUG/1h2tAteIFDGqAUITvAdvukuNBv7AiAnZgrjdODKgdT6d0tNmT5+aktqi/5tCdiu17v+QGP3PA=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4563ae7aa96c250f7f6ee469f650ed71b96f05f6_1595182612802_0.21690416618903163"},"_hasShrinkwrap":false},"0.0.0-e618ab41b264a6c54a4926e0dce454c9436825c1":{"name":"react-image","version":"0.0.0-e618ab41b264a6c54a4926e0dce454c9436825c1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.5","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.1","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.21.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e618ab41b264a6c54a4926e0dce454c9436825c1","_id":"react-image@0.0.0-e618ab41b264a6c54a4926e0dce454c9436825c1","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-VNKZLVdJ25DvOCvCiMjnEb3sYYGtdjT188jHc7Ghfenf9JODF3IZHsPnXvM/h2jKPvYf7iGW1Tr0nAHu8Qd6kw==","shasum":"997c07c605aac9a48229acd337c7b4416069428a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e618ab41b264a6c54a4926e0dce454c9436825c1.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFJqgCRA9TVsSAnZWagAAhpEP/ja9jeK/oRTJz/X7r9Oz\nMTbJgdbU1PsoknVRoEJcj9QUirOisAs09mZZpX7C98PylMPb5BuiAKjgbn9V\ndWzrk0v1djvq35Z8JbejRGlfoa5TO0IVG1sKXqiacFCoSSrkUxu/zc6zp1Qv\nOMa7hvbfNAHQnvGvAnz3G6zxMuhIy4xb4qZ1ZMzyNjlZ25Hzr+R3weGKQ2VA\nWIm4ermFDU7521FSnzE6qC67Rx0T1WUaib0Vhuq0bDt5PXMaIJUu/F31L8So\nzpu5Br0zSjG1RnvgW69c9A78ZgpaPte3CErhZfF16VpyvlmJPQvortOaV1Bo\nkGt3fymGHCQQ8/3ZB9F9TDcUSPlJTm4xqejBcN3qRdeUqjBrMZq6uaRO0JEc\nzMOk60oTgFyBFpVekv9VzKdmCZU9nd5gqOJZpSkxCaPz0PWl7YC6EkANsfWg\nl4nle/pQ94kqVjflWLN/2gpL52nJVouwgAZikvKSbT9QTG0RtMcns34JCIvl\nkGCGqy6Pm+m2n6r2QKx526mzFovmmqqD87Q0F/2Dvw7LERQq7bep2iJyjMhH\n01detLO4CnxjrPzCZfj8jWuy+Bq8nzqHhnmEcy5WnDj7OQX8WvofT48JmGB+\nOPFkzbMxpc36Ikv+BeztKY7tM+fuN5pzcRrsG39/kGYYK9hXmUUMTZQdSPd3\n1WeE\r\n=vZBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrh5Mprt14uXkpgWxuvTqtEObm8GvguLy4JXCNcOrxDwIhAKZdJK05n8OS+d8ABQOo+Wys93m+zCjo2t90mglUXlmW"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e618ab41b264a6c54a4926e0dce454c9436825c1_1595185824370_0.4535528005391205"},"_hasShrinkwrap":false},"0.0.0-6615558c01fbfeae48d707e8570a53166661d75e":{"name":"react-image","version":"0.0.0-6615558c01fbfeae48d707e8570a53166661d75e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.5","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.1","commander":"5.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.22.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6615558c01fbfeae48d707e8570a53166661d75e","_id":"react-image@0.0.0-6615558c01fbfeae48d707e8570a53166661d75e","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-6zP6CMxZS9zHslqNpMXJJ/n296f6bcyiC5dlQ09eSJs9FjVe5H4CsaYqrFZSFlsd4uZFag43ucEA5n/hxHKfKw==","shasum":"eff88403e4d9e8cc15a16ebac8cd07b6c9e308f3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6615558c01fbfeae48d707e8570a53166661d75e.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFggKCRA9TVsSAnZWagAA69sP+QEc6cCSTgdVNwh4+lwq\nGdzgMZDxwjb/VbXgVevvn2GXINa+m5OOufEXv/ezdh8tcL8TZ2XEpdc+I7E1\nxhVkPvbIad/tOTK55qarRJ9XkFrXIht4GdCOpAw/gfhxBO8ySzzXdUAAQy0W\n8Nf/MAWp0/dgiF9ysXagcyhova3t1zQFLIk3GSemye4PJJzZ+ezBxcEDKb19\n7OIHff0y3/4GOqr8ud5PGQuV3Mi1BdhCE+JKWz1xT0rSgA72ZqIvqnUOXBr+\nN4X6enfPuFhjMAcaAq7iQnsHl5QkBd20XIZES6WQoU3SdY3YGIvG+zwGTOX1\nldLAP1jQza2ZwVjviKYwFTG2zUqDJwxXL8ut3zJw4z3zl7Kfw3THfyCh7nS4\nWi2HQ16esYw8p51XbislgKL3pI98v5eKEnfcRoXhSJBvBCbP2DRsGXBjrbHw\nGhcdRtV77spRwQzIIcR4BAZUHsApCkJMc90pZNgS8kynGj89wz7Q7/0qnPAZ\nhyQkzKwji+fl/gHhLj2DFc5JeyLAtEjBunvWHK+e+jO0KGcyaA7WSiYsHzKa\n++T/Xy17BcVaijmQco0puj364bNozQo/XF2VFiuheNnsydEjik6CbfnJ3V/6\nbyXlAIFjyTjjOdPnLgE3fc0DiYIApPNT75ayHyei3S1XTBUFFKX7z8h8IH/8\nfFqK\r\n=XiXb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfZyqrN3D7Q0tVni7GJ8su+GSsVRoOgiDtIUSISrHmQAiAQiH4PtRb0nBO/VB4MCSy9CawtZ0zlWaldgo4nPIjA8A=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6615558c01fbfeae48d707e8570a53166661d75e_1595279370235_0.23471571098891286"},"_hasShrinkwrap":false},"0.0.0-8ee9765d41ce347346502e909b5ece4c67e3c1c1":{"name":"react-image","version":"0.0.0-8ee9765d41ce347346502e909b5ece4c67e3c1c1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.5","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.1","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.22.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8ee9765d41ce347346502e909b5ece4c67e3c1c1","_id":"react-image@0.0.0-8ee9765d41ce347346502e909b5ece4c67e3c1c1","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-VFP7IRNAWslaagh6Q7PYg9ed438t02FkERifcVbuJibkLbKfcmZL7XtljXC4mTSSNQG9EP9KzGUduDb3q4ck0w==","shasum":"ed8e6c4060feccfb3d0983ced896c7e6c37dd5e7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8ee9765d41ce347346502e909b5ece4c67e3c1c1.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFiTJCRA9TVsSAnZWagAAn6wP/Rd2IGQ2/sjnZ43W8iWY\nbQDe+sppQSUxWoCp60QrH1O8g9X9vQBgfSvVurnUSI4MRp4JGZCYIs2hEKd4\nJJHLu7sUavJYe2rNiWVIMzlY7sM59zrtgrAWL5+tNvyxqJ6XWAkmbPe1fz0N\nE6yZDDD3BPPhw848MsfUD4jfBhU0SWkRdejhLJSgv/z4+2lSFDJseC5Iw3mT\nJ7jpgrn8orzAMmSdsGmlmQb/PjftfeRuMd4Vm+37gHOC4CxeA55sAkyFwzlR\nVoygU0mNsiICw7XV49j4xSzZSX7arc77B+l9DJU1RqW+w/8mAKfQiMMtN2kp\n3vpSmm9azviHE3URLhmCs32WPx+5cLuy/WSi2BvFkcTGvbPA7uNduPJTwwgc\n1MEGqXPPwpIbZLVevW88x5H4HUY6rp3qSos5iupa5kjaSSn+F3EwHtt3LlIQ\nG83jybFvD6OMGSnlJj+MPd0wrifkz+9mB7fPltrJWGLv9/mEszQoAdPnsDky\nwPnVN0H5NOj9yySaFYX1ifo+UWDe4LCAHWQ2YAUWviq+PL+gdNC6tYxVnXhX\nffGCkho5xW5sYdMSlohMxyiL08p1/ccgxUBzJlYY3Hyf9a7uJgbUnoKaWpIA\nJ6PvjkTlsHeHvQ5rCbKEp5OhG42CSqfS6p4F1BSV0ECC+EX8jCD8Kt7/EmOy\nTj9k\r\n=Ux7p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICI2DTIoZHygyrBDBo6pAR7zdAjr/WKz8UTdd4L2/Km2AiEA0j7pHlMAxf46DYSapv319RXSGUzgIfGD44R9qiy+33s="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8ee9765d41ce347346502e909b5ece4c67e3c1c1_1595286729256_0.4268709681657261"},"_hasShrinkwrap":false},"0.0.0-9fd170617c6b9d3a9a6bc5f0aa10734c9f984fcb":{"name":"react-image","version":"0.0.0-9fd170617c6b9d3a9a6bc5f0aa10734c9f984fcb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.5","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.22.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9fd170617c6b9d3a9a6bc5f0aa10734c9f984fcb","_id":"react-image@0.0.0-9fd170617c6b9d3a9a6bc5f0aa10734c9f984fcb","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-CjU4FHRdGmLykFN+QUQsHIvhmgUzft7L+KJzOTOZiJSei0M0o2OJ9bt9NM5gZvf8BIYG+Y4vWXdWauU8iI+FPg==","shasum":"81c8991732b5333f4c27382ea92c52014f89cace","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9fd170617c6b9d3a9a6bc5f0aa10734c9f984fcb.tgz","fileCount":20,"unpackedSize":37989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGRNfCRA9TVsSAnZWagAAq+UP/3qvZMSmzGVk1LU+6kBd\n5bNgNXe5kQDKX5ULpQP/b+bBsouqNMMSPFP6sc9v/OtmgJQtnaepFO8NXdhg\nm/qS4qTmlj0bqFjU2Gr6WAfgws4gLaEi0bhY+qEennYepOGFiJ++WRdr+DcO\n3n51I0t9BoMnpx1XU445ULOdmwg+tqGdicmwIzuMY+nfvrF4u6uPnqhwgBxW\ngJnM3SEkFkGSUHeDTNwTOkLUY6ayLQ6IrZdcVgSXAWkDQkpaAg3fI0/fsxTA\nLuKM7tg3OT2C2UTfDwRq2n5FiajFIgFiqOsUZS8g8jF4axG2yt52u3YV0be5\nhRNLTJCFYnRrGPwCsrRfWP/dkyUC7YVILDg/QNAMXYxnzbBx1Gop+7l3Mzcr\nBmoQLgRmXHrsPd/DMFofQCiPAednUGaMwN8u6RGDPbnDPOq5l5HB6S6R6wJ/\n1JncX53Y0UXtj5funCWnRILWm1rfbmQ4e4py43mrOomN75NEsPdbFT0tmuwU\nyuFGzGKwjBQeEgFpJBs0mpKXAPotK/a1H79Tppwow1PiYtWoiR2gffr/62hR\nVul2qbeZ9JxZPu7O1R6CM0W/SmmucajJznM0ilp6ixPtg3RKDvvnNg2oQ8TF\nUYMpcpjo5s4NovLH2MJbPhfTB241kzg3FlcTQKzAtA2QG0twQ4XlfGjtKeO1\nhZf+\r\n=OZGK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkShU/HhwI36oC/VE/vHabZppHa25QfA9UJ11+8A08gAiEA/IrEm6mBgN6dwD7o+VD0ZWg+uFOOe7j2ki7WsP3cUBY="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9fd170617c6b9d3a9a6bc5f0aa10734c9f984fcb_1595478879003_0.5864743834755521"},"_hasShrinkwrap":false},"0.0.0-46140b07887c95dff92c65ad5895e169d5782721":{"name":"react-image","version":"0.0.0-46140b07887c95dff92c65ad5895e169d5782721","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.5","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"46140b07887c95dff92c65ad5895e169d5782721","_id":"react-image@0.0.0-46140b07887c95dff92c65ad5895e169d5782721","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-H1YLreOtlbwQrk2hyf8OGk4Fk4CagYiRywnA2TIzP0KGKugP4Xu2i2iOoVRLMLTP02rFkmsjmSdXyiPKu585rw==","shasum":"2ab2a9218f46c86c327a47723c13a747edf95f5c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-46140b07887c95dff92c65ad5895e169d5782721.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0RFCRA9TVsSAnZWagAAalcP/AsB2EdYkyxs2KY7pEri\nbCt9/E0yUd6MoYSn0RcsQzeUa0nM3d6AEI4zalb/ce81qYv7rTZNIAQY+Z5z\nByzGiW5bEVtrdk99QN5qGGY3Gtu346S1Xe3YqOAzCcptyWCWjyF2GjoTh8SY\nBAHG3zNK6Iv2iEiXNs5Dweya9a4TBv9H4/nz72yihQj+EEIKdAiJ334VCLsB\n0dRHcNOptEKeT4vXkGBQoJ89fGuIFvC/QjyJDhnFKHwrfiETADVyPfWXb8Fu\n9JkwIfgPwgI+EbmAR+Pjuf4yipJkLCVM4nbPI+wPRfWhS8rSyXmlNGl06P68\nlhv3JmWs1IS7d6fAU/rix/IIiFGHhmcRUXxnpjtbVgMmgQMnRQqdRlBvyP9Z\nfOt3V2gr8V6r8j2cecNoK/cQpRe4j9HBJ2CBZe/mS5SY82sTB8k3P7FijF1X\nrb26iWIduQh9MlhIhl3XdBkST4uF6vy+S2ybC/DtAL8r1xeHYisnkjMebPLU\ni3sg4Uv7R3fgws41s+8w56+W2wi0fADdnec/hyFDYj5IP5HAFbnZcDop8CEP\nkFhIZ8ZxPtYwdT9WG6dB7W+YPWC6a1tHK0/xkbk/eAD9MIHAXMTbigOxl2AZ\nP9ko7wXpr87yJ3Q8UNNGGTODxoArOjeC6c3fCmg/8wjPeJ8bHFmckPaKiel9\nnUyu\r\n=oiNM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAom5NEZ4zECkctTVYVdk7iTcMJK6DmyVAWZunrKE945AiAs6A1TUxxQ28u1CEzFgaVMpbSc03rVESOZ+72BnnMWeg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-46140b07887c95dff92c65ad5895e169d5782721_1595622468614_0.2654639127486329"},"_hasShrinkwrap":false},"0.0.0-a6695c438d9ac988804049c595f635cdd02bf8bf":{"name":"react-image","version":"0.0.0-a6695c438d9ac988804049c595f635cdd02bf8bf","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.7","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.43.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a6695c438d9ac988804049c595f635cdd02bf8bf","_id":"react-image@0.0.0-a6695c438d9ac988804049c595f635cdd02bf8bf","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-nqw6rA1rRhp4PTFsePsuxEKCnLQvHIdcjJbrRV5Fd1zsSuG65WOzRS4Ec8C5xDUtsRBIMLfc11Ex4yjHTqC34g==","shasum":"cb3cbb343ed9b60257cb35fa2bf4ee1b451ab9c3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a6695c438d9ac988804049c595f635cdd02bf8bf.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHLNoCRA9TVsSAnZWagAA1asP/A8MzFPM5Y1x7tZi7hVv\n/43ilcl2/HZ9tMFhf3TPJNqo9RpsYvtvp+XYaqtgoxmgSXMw+9sRL69vHIX3\nGAd3xOW501BqTk6KAn+20hJ5TcJCbEZNiz5K9LS5TNjZ7ENiloC6xjOCGvo9\n1IoredmExUSo96qsQiG0tObl57JiiGeyu7BdaTwkd3X8DfmsnEMljwTjqzsr\nf+su/4Lor3g24+ZnYdWZ2cEEA186dkQzSkMFm0ZryLAe8wYgf7aMcRaPOqiw\nzqLWeIcEc+lddxGtYQkCk8nZuH6ejV3tUTSIgZoN2fabrYpA80hnu1I7wr7A\nv3/rCEpzrbkLCWeSLVX1gaLU5EsDNf4RieQ5kwbXvCTOBM6CjSRG9sNdyV2e\nfser4/X0K2hs32tgsUQWTtX0Dq497a/AYZ485u9ao9k1rSZzIUmN+uQPBNyH\n1jdxF1Wh0nbHJkCzp/BvZK4K9J9nuonjTL/cjYzn+rqhYBjUMsXjUolat0k7\nz2aLMYnvA9g5WPg7lD9xoxs0Mx7tciOU60HkLe5M0oC1maDOsR1Pof8zdrH0\nwMlFGnRooNHUd13gYWLhOLzpANQiHn7rsU7OtUWvJLhQJOEhUcsk1rW5luC4\nr7OLhgvbSx7XXZ18QhTmpDsn5wTa/PsXgS3BIsCY8pT7gRBp81ZO4zxqWtxJ\nNQKU\r\n=PGkx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZbVFIkBrn8o5CWppx6iuuhnIiU4BGLNu+nKzx5bkDrQIhALRrAE3TYuZb8wGDKOdcaFPKhk6k1dYOyuKlTS+T6EEF"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a6695c438d9ac988804049c595f635cdd02bf8bf_1595716456112_0.8629885772622659"},"_hasShrinkwrap":false},"0.0.0-314d8d31cfd4fd257f4c547dd2cf26cb6bcc7f4e":{"name":"react-image","version":"0.0.0-314d8d31cfd4fd257f4c547dd2cf26cb6bcc7f4e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.7","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.3","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"314d8d31cfd4fd257f4c547dd2cf26cb6bcc7f4e","_id":"react-image@0.0.0-314d8d31cfd4fd257f4c547dd2cf26cb6bcc7f4e","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-TbLMOyKm3wpNF7ztB1oXTySfh1iDKUe39q8kqTmEFC028axrzvbw84OwCtNVSShRvPhwjbNWKsQlo7T9CFBriA==","shasum":"d34a4401c547203c47b1b21c5cc22d35189963db","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-314d8d31cfd4fd257f4c547dd2cf26cb6bcc7f4e.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHL3oCRA9TVsSAnZWagAA00wP/A7maNtJHzH+tgQWSHSJ\nwWFdXjm9sd5KeEP0fJEfCAp3CxFStvbif4Lmh8VEBui7nH70dVY7IhsHti+v\nfvxbvMmbTV8L0bfYwnz8VKGm36eaRbuKUWfYHunOAtiFY2Xm+luYSkDhtsa+\n8AiFjzt7k2+0fbaer6a/yJwwzrUWnAkPL6DI/En9l4QZdcbtVGd2C+Hfd16/\nUQpF5YfhPzh86kEPByR37diJLy/KTL9AIcEqfhxgC/Q5iu5lyzw+iSDa/ldK\nCeCFPkpCRO2qHv86jXzuYzzAxJFciF8WSQXKoAPHG7R8IOvF6FMLNl26BrA2\nZpfW5LWiDWsgN+VUjISNnvIL8dxLOfHrGa9EppUy14aAVFvB1TtEashXiQ9a\n85YIaH0MhDE7Fk82mO9sLdI59xnCfQ40+mxVarEXoOqDGpMgRlqD46gYp/lU\nI26XRGF76++1fl1lAe5N0qS+zykxbDeaOCHgS1ePHqtbUhgucdUnfjgwU4+B\nC3thRHWCyOfneMR9Ui4mPxThZdom7+Sa07EtURhZnc4WwMUdoUDi7Gxnbrx2\n3hRXFZUTqvd7icsP6/A8zERY1bhktPurT2e5VHh01z1aCdy+MSf8nR0mwnB1\nfCAM9kl1E8ktqAyZQKTBDHNgLlzjeI36Gw5sqJ+qy2ZFm0cc5exKJWOfp1xv\nccTt\r\n=ZGur\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpMcN+hNgXbX41mBSp+SL1mF+0DZzn8kvrTu0FMRPc2QIgc/b9JIF3B5jbkH+PJtS1a+Wbv68xrRs8QpnnQpgkvaA="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-314d8d31cfd4fd257f4c547dd2cf26cb6bcc7f4e_1595719144152_0.3132586032712794"},"_hasShrinkwrap":false},"0.0.0-e3dc7078f0e25e3cd24bed08a0efa567769db218":{"name":"react-image","version":"0.0.0-e3dc7078f0e25e3cd24bed08a0efa567769db218","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.7","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.0","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e3dc7078f0e25e3cd24bed08a0efa567769db218","_id":"react-image@0.0.0-e3dc7078f0e25e3cd24bed08a0efa567769db218","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-aojOdwUtpKyulVg7DZ0T9qBHlYweS/H9Ld2AzEMW0tORc2E6U/XJlRsas4ZTelA+2HnIIKwsdKO1s5pEjBpdAA==","shasum":"9f51ceb32ca0541538b40153704a4671f3b632f6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e3dc7078f0e25e3cd24bed08a0efa567769db218.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIVMbCRA9TVsSAnZWagAA32cQAJsrIeul50LKt7ILILmi\n5a+2E1XaTZP8SmxxI5nOFmJ/n/DnPOyHtnelKGdzLR43XrweAW9wCok/N+rf\nv9vbKYfO1D8t5YuUBuOM4Uc29EZC/Dcy/sACiwo30mpVO9+KnOPq7Cj2V+3B\nFuZLHoa6nrPXx/bheakXfkFPk270O1RAzczUJjQ0VFOf66UCTvLLoMAleXVu\nPReDE0Vntc1l7UGULU4ymJPU5buaTIjYadOuCiGmBZvENzC9TCqogQvb8pNA\nQ7x+kbrvjM2XHZuh0vpw4grIBBxPQdgrXT2xO1uzcJl5+qZH7mGpYG4IJKG3\nlTriGUmSfM8zuS2F4/8BL5G02l1x7atza98PdMf2qinsPo48qSju77HxaBl5\n2QXz4Jr/tfOxi1fE1xqBy9iwS8nuCeWgMdYpkiR5dcpNiWGa16xEEe3ClXTh\ne59UpTHzW111+OmsEzHnFracBZj02Pz7wAE1UDsawcVF0MIQIGkmMTvgAtY8\nswplNVDJU7LsydGmoOKCrleH1r468r8spJdRuM+fcbk2tC1193G/FRvGoMID\nnuBZWUsf/6KSVPBlZfO3X8B8L/FyeeEVeYddIRUEiQyO1FGyy5FSEYV4imHZ\nK7j9iYpT21JiJGRSmkctarf/tGicNo95bgYmyr86jnTBYeeWiZN9OE52uSrD\niQaK\r\n=xAvG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFb+7RPcF+Dk1LunZNINVKwuSfH52yzik0UhJ9oGbknAiEA0vHR4xZAY/lwZfC+TjR6e5IfGbDj3n4Nj+8B/Cck8ks="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e3dc7078f0e25e3cd24bed08a0efa567769db218_1596019482805_0.09658224799691606"},"_hasShrinkwrap":false},"0.0.0-9c79f7d88afebd86bd8cb7de58142f6317f8bcde":{"name":"react-image","version":"0.0.0-9c79f7d88afebd86bd8cb7de58142f6317f8bcde","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.10.4","@babel/plugin-transform-runtime":"7.10.5","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.10.5","@testing-library/react":"10.4.7","@types/jest":"26.0.7","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9c79f7d88afebd86bd8cb7de58142f6317f8bcde","_id":"react-image@0.0.0-9c79f7d88afebd86bd8cb7de58142f6317f8bcde","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-28To0t+yLaONJv+V0KeHuoDEtHNrgoYruJ15fYoTmtYLnmC2a08m8GbEWOQQFU+GLryqwMWMc2p9U1HKnOzETQ==","shasum":"168f9138d5000d1b03f135a1298d295542a77002","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9c79f7d88afebd86bd8cb7de58142f6317f8bcde.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI/B4CRA9TVsSAnZWagAABr4QAI5C6KzBLkL4I2YMr7FG\npWweKNGG/JAFoJWhSsM7O5R1h9WSx2gDU1PmRVYcFdL4uNZQYxbiSbkdDCIP\nm4e27WIWbUfJTuamupVaL1+DnEVdPSM/eVMCQSHwqUL6saSG9ptT4utqOETd\nUR5akq36k/i6hG/vpADFVVdeTU2bwZUMWgrPb5nP1+GRB2GByG1mablTvXZc\nfLMG8XMruniDItUAOLmE123yfpiUSIvyGQoAlm6PpucvZyM7ph5bK0ENW7wp\niXX5REATHkWTkvf4h3GnxXT2as+NfGv3aszyixw5rd2Pwx9oGTkBKDAMlsyu\nOQ6cZ9tBar0vHKIDxQMzeY4Hnihfv32gaqNMp46C/35xNMizARGJIjafcP1C\npL8VVmGC/yE36MStSwX9lsNtJLu0RKazB0115Ge5Mc4HUKsrJilt3iYJQQBv\nIAGJLh93/gfxApxZyWGSMDxP44kjxdYhI4x0OI0NnrM5StzpZZEICjZONt7y\n4cNj8zk6ezdhWh/J8qgUbF1ROVxtHE4bIb21Me/S30qBACKXUT4ddaBGh/Bx\nEDUa/gO2awJePWXKVALSebbeWulR0O2zOU9jmfjz29OlZlqUP20eiRiGf3Fv\n1Jg5sAzYHtevRunxZKQ8s5c/er2ylHUu3js/8w0SbdQqZVcC2ss90he9eGgO\nyt/L\r\n=hplA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfJt9q/zwny6QuMr16hDrmOAw9RKkKALVl+gSMmr7AkAiEAtw52OiS1wqznIo8pz02VpW2Xgxc1WeMf1lkfHy0e9Es="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9c79f7d88afebd86bd8cb7de58142f6317f8bcde_1596190839891_0.9147455179667476"},"_hasShrinkwrap":false},"0.0.0-151650ce7ea136df25e10347c43b082b172bd566":{"name":"react-image","version":"0.0.0-151650ce7ea136df25e10347c43b082b172bd566","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.0","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.0","@testing-library/react":"10.4.7","@types/jest":"26.0.7","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"151650ce7ea136df25e10347c43b082b172bd566","_id":"react-image@0.0.0-151650ce7ea136df25e10347c43b082b172bd566","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vnfxIsKV9bU+MP7jOgi5cWP/S/SS1KIePwll7kbEF2iyZeESs/FKU4Op1l2BhA4YnHN3WRrB0jEp2BxIwtXnyA==","shasum":"fd2397512c5f3708216185d0f2a74afa2ff6eb98","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-151650ce7ea136df25e10347c43b082b172bd566.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJWBsCRA9TVsSAnZWagAA704P/AkcuZz2814DjZVIq5cY\ncMQMWQ3UggrzNDmZHZflxNHdEI1GGU5GerAeepfzACcuvt3ZwZepyYyuU14p\njMrfyGjpPqoMhKY8u6JSX60lZVs48qgLPjt59Sq1O+sQWS8XSyEQcpjeN7GJ\nGdWF/fzcDejAahVf/EWS51oGcEEeJ/flfbuT1mR2c7s73HlpBkmHAxDUxLxf\nrc8uQBJcL0eWjdcS5BmxAKPpoHA6Cf+TSTOGGp5cDi68FFgS2vZmbDkS//6v\nYGeDbbETD6sqUBFVSEkcvTyAyBQrOGkGasZ3A3omX1p46YMScUxcey7m7WTB\nW/9mTDY6jBPOMo9LQO9lFuXF29JLtTpc8/pQcaS8JHRiDz/AHQ21vYFT99lX\nn96hiNhFGWnfD0tIvUhc2LMoTLD7pBOOcnyTriu1PreobBbr2NAzsTE3lMuV\nPF/XreqIWWKuC+X2IXyU5U86SuLteNehj2pea1oe38KMVACkREGmihP+b630\nz1Y6OydXStaS3u7IFbJ1VfYTx/Pa9ZcicxGHGX6tG0sFthXcVJzaEzqJYC/H\nLrBPFiiH6V7/6Ge1TPmCBbMSYT3omOrT3ak/zVqFp8kYqXNN1vOnESjacKOd\nZwyhLndCoVq/HxXNeYfpZNpqHUqr3k+7YlhAHbBelaRNnMuvJa2i/TwsOeZ+\nJePF\r\n=ryBU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiBl4yvNjJnGQXanstsIyr/BeNptnR310hFEplo5FP6AiEAoRJnd0qBc+AV1KMVFJDUil6PEaxj/7PslhF5Y/y7sZM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-151650ce7ea136df25e10347c43b082b172bd566_1596285036227_0.9519040769533071"},"_hasShrinkwrap":false},"0.0.0-10d0a256288c8a7e6743f708e537da6b727ce5eb":{"name":"react-image","version":"0.0.0-10d0a256288c8a7e6743f708e537da6b727ce5eb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.0","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.0","@testing-library/react":"10.4.7","@types/jest":"26.0.8","@types/react":"16.9.43","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"10d0a256288c8a7e6743f708e537da6b727ce5eb","_id":"react-image@0.0.0-10d0a256288c8a7e6743f708e537da6b727ce5eb","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-cuFpamNAIsoMTLPFPb25nf6glygLxZZyO7fMSxH3cLCh+cGAR+4esMigtkXoEvtsJz4XgyNwQ0uX6Tm9U3yayw==","shasum":"165b8707b8406244aed56e64f3e04b19ed9bfcc8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-10d0a256288c8a7e6743f708e537da6b727ce5eb.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJWwNCRA9TVsSAnZWagAAIs8P/ierg4oNir12VhlwiA6Y\nVz/YjAklpHM/qZo4OkCVH7b1AKYSUC4Oa4tqIeYCxJ9gLn1hJduDMNXxgeKx\nXHRtk1DwV5kufCHaR/DQDu8Dj6leiGZl5ERJ9AdOqq/jM3kwEqLTV4fOLT84\nm+QV/ueQd547wxzzj/N+Xz4lb6pYM3nCzduwm2SE+aiJ+sbtpB1a+KvMr0sG\nY/rfPwZ+6nxVLhBV9EpU2eR+kBokqnKggTUp6c4aBFzwNY1a+kQlg+CErtTD\nRwYPSmNRf3JakipkQug40GlsgVoyFfH0r3DP+0ddSgShBiykTGruNMKfW3jn\nvt4zYXYzxOgCD5hWh212ZsNO2+feRYMXjPqJhdnr7jbMRQC4SjA9gymqcZ29\nH29SW1Vxt3CclVSdWdjjo7PqCbjum6jTHaQkjI6xeU0BjlUZPsI1+9c6vH/4\nh7QLiY0kZ0PbqQIJEYV5h0WvBSVdc36wNzdOvwA1kuiyb7Iq8PSPpjB5rjNm\nb6eG2KG6FrO3yh4Ce3rRYgm3+WBo8lQl4DZQT2quZhrTX8DRPLCCzt5YHR1H\nn2bMwALJhkm+WPanSRknGlwKNDZbgAC7Ua8Oe6nfuVT09Ftes0bh3DbpLRnH\nbqYioEDPvxEXGfV0eO40TQ6tZil3PiAj5kPRTFEXAVagQckEjH/gFFo0x6yF\nkFop\r\n=ui2E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFyZzkgLMUo82AZWWQBx6ppNHlgVzbDt9T0BVL4JUVRAiAyyQwNd1/EQJCyEZvgfSwotwnwLk6Sv16KXNK4NGR7TQ=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-10d0a256288c8a7e6743f708e537da6b727ce5eb_1596288013314_0.6744826244124502"},"_hasShrinkwrap":false},"0.0.0-43466d02bc2416861e8f482782b99ec3dc978f8c":{"name":"react-image","version":"0.0.0-43466d02bc2416861e8f482782b99ec3dc978f8c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.0","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.0","@testing-library/react":"10.4.7","@types/jest":"26.0.8","@types/react":"16.9.44","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.1","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"43466d02bc2416861e8f482782b99ec3dc978f8c","_id":"react-image@0.0.0-43466d02bc2416861e8f482782b99ec3dc978f8c","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-2L6q/h3fl4y6HXUO5SW1ugbOn01zH0Omh2AafE+xoBVg8bg62lfbQ0G1zTtxqkKVL1ukncx1XTrwRR0tx+4ecA==","shasum":"8a81fa02b7a66d307a51e5e6456847e543d805d3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-43466d02bc2416861e8f482782b99ec3dc978f8c.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJsyeCRA9TVsSAnZWagAA22MP/3aT1alLFcE5t51S/WEx\nKB/rO1Wp4ijs5LOqF1RKkEKn870f14N+U1hVWlzTHPxks+Q3sYb8oluLxx8Z\nC2onjxHx/ttj47TEjRTjOETY5xNPNt9HJIsTKWUd5rI1SdBPCds1bwalfxx/\n+cIN4WyDalBxYcDnGoHYPuNqKf2PWCQ+KvM9ohOkUeVqkU6o33MPtS5Yj2xV\n9jCUvsmVZKnzsaVaSQZ09ZJvtF6Ki5+acabFrP8tiAfM7kHqrbGkWh8i6QrP\nk1yOC4jFcj1DZeckHgGLN6HzYA/+i9s6G2JBwb9uwxrDduefoRkLfAoveA1G\n+xn31l3f2p2j7oXkmU5VMgUVuaIxblXKIwMhSNOrtWz1wNapojUjpP6D8woi\nPV8NjOQEcmoZd6N2XngntMWpV+87SrSQRULYIOQlZPeqnJQ8nAXf9/sbrZeS\nfkvkrnM2yK02URkp0e3LqO8lClOJ3kPnUpbNte+qTmfQ9jGnITlDOplvrpi5\n+sQ9otWFHl/Ki7ZSlNALtsbT7bGIo1pO2juTUs+06wRxlpGhCw4RjvGHProP\n98N7vXCdMluAkbO4MhqbrztNxE6/BU4aOS5o4LnGrqiljrMz9VNPtcTb/SkS\nkIMnItH5sofYPiTsMUh47fQSxCq9GSF6aSGgDdrMAtFK0TjALf8tv9xD2yHE\nR2k4\r\n=F5Zm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxzHaQAV5QFSSbJMKvuT8VwsdWC+e4yRS6MQSGnoVG6AiALl6o3zYBOqo3ODP69F+EdudpeVRGJOCkyIlp6GEfZ+g=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-43466d02bc2416861e8f482782b99ec3dc978f8c_1596378270189_0.6043710595017806"},"_hasShrinkwrap":false},"0.0.0-b9bafcb20ad93c9487f584309587360b2ac16a6c":{"name":"react-image","version":"0.0.0-b9bafcb20ad93c9487f584309587360b2ac16a6c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.0","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.0","@testing-library/react":"10.4.7","@types/jest":"26.0.8","@types/react":"16.9.44","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.1.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.1.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b9bafcb20ad93c9487f584309587360b2ac16a6c","_id":"react-image@0.0.0-b9bafcb20ad93c9487f584309587360b2ac16a6c","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vJ7a/he1DdkTZSyDxWaSZ/G5FTU9d9HNejaGWHPq4HGbcG9tC6NnWWTMlRtuprLpfgo9ijAiG0d6uLd2lm6QkA==","shasum":"019129d8e275ad95c8cc85ec0dd49f1bd349c390","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b9bafcb20ad93c9487f584309587360b2ac16a6c.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJtwuCRA9TVsSAnZWagAAieEP/0U8guiGAAOWP5DWVd3r\n5wm8Jfp+pHnnhL94b0gwevIEKWs2XZG0I4FduXKVlXCnp9BvJWtZyC5NRTFM\nZohlaqzLHIeTC7lcN/Dt00QULP6GDaBVv/PsRWRJqkhtsFaGK4xRfOkdEAEY\nr8kcT9qr68ihqCCxu/t9GfkrE+BpIET/wzSUrfIlgEUr/hAcESC68BosU79W\nfsXvAWgdxJBkcubQO/Bu4MA2LChEN7hyCoVPPLqDRRXHD6ryVyzg/qkVCZjH\nWYDRlGvZ/7GftH6u0YnTYTy6odh5MGZovLupJHy6N2ARZKuixHLoMlcapVsi\n939YnZghmT9ulLwhzqA3C0OfKFhDttilvFo8HzCHSTLLd/jW7fcdVPgPYsNU\nozsN4eXSfi+kECgoFI7pSz2Zy+JIH4M0LPtL4us4pWT+Xio0ygsddGTSITjd\nkxtey9/ReNfWhoyHbMZBdEX5Zxw7MxNyTCgu9UgiXfM+9xhHWwS10MYOajfh\nThqk3EqkpdVTPKExGdDCq58eBsb60sR493+SEiFXoaNDczx+HoZwS4UkdC/8\n2blqskZO6F/ujvM1/TJ03shSGolhul0uj/tIC5JUbJ+VTj2FQe4U8g+pt99p\n3D777lsQEuFH0JMwLqqiCIR5cqfkXis5OJCuYXRSsWgrBQpWDv3swYyFr/Ew\nWXwG\r\n=RL81\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKaa2TfmECCUsOtrsodxtqfePiBaSirF7xLgW+qssOxQIhAN7xwduTtvs0CD65ChKRJPnpVTXDPwcD0lYkCfIy6cn0"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b9bafcb20ad93c9487f584309587360b2ac16a6c_1596382253745_0.28469276323437387"},"_hasShrinkwrap":false},"0.0.0-ef9913c317018dfcf559159133efe332feb25903":{"name":"react-image","version":"0.0.0-ef9913c317018dfcf559159133efe332feb25903","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.0","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.0","@testing-library/react":"10.4.7","@types/jest":"26.0.8","@types/react":"16.9.44","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.2.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.2.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ef9913c317018dfcf559159133efe332feb25903","_id":"react-image@0.0.0-ef9913c317018dfcf559159133efe332feb25903","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BVFwscqIPqq4G4jxar8N7bbQYLM6A9vAltvF/dFBCzzFOZkZxcE+tGWsUtDDQNf3xNtQ3ZyrxhGfYDKZXsDd3A==","shasum":"3089c3adc09d5fe649cea2dd1466859662266365","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ef9913c317018dfcf559159133efe332feb25903.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJvMSCRA9TVsSAnZWagAA3ogP/1IqIR2iucv6fB8evZJf\nla+CHnfn2SQhyWYqcaw8eQxdrdomaOui8ClNNcIFMGAlawZZW742uJqznqA/\nTojg938IOJu7UjxwMro5FBMc/KyL2hygz41i3VCYywavlNcqVvj851lslrNA\n9oR9aSUTVhA1rn9QJcXLWqb85ev9Wm/GCfq7uu7eMHq7L9TBfRHmXBFoEMls\n7hXOC83jWWrBcHrp7nOdxXPqTyVqpwl58ItZHwEmh5lkksX2p7Yzr/w7jZqj\nRHpKNVhLSItBsFLy97RF+i1w6rlvNqf8P7pMnPQFG10YGrhieUwzIYcoPH4H\nC+YpzYNwskWQpS4lFVqiZu9aN87llZYsdSOvRsn3ih4anSLjMZ5PG26Xv/va\nKcWU+OsYFFoyVVMKXtZo1EZsZ5hGcCknLiOctDzFcM4ssseQBW9ua5hqWn8J\nRBNB9Hot2/l+0c5qudo4wdZeC5ACM7GwaE5aBoIzgaaZ7t51Qpuzo/1lBzIS\nYVY8gWx9z87dXU5Wr+AIwr8rXmMwudtaCUFBDEP2XIO7CHIs+9mmm6qrTN/E\nPwPcZ/OGX2YIOgBA8LglOOP0I9+xjEOLOoIaGdHMttQD0/bKlz1HBAymSTZX\nTLYB9QwAcP+Ltv9CtJBg7Hom/i+f2IC4Qvr+i0etypItXLeEZhwVWXLil29V\nqX+u\r\n=W8NR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9ppyVrEThdlAYRpsU0DzDpK8RPYNAPgA/yTlMqJlkBAiBElWtL69mssZRhLCBa2x9y4HE+QjGqX6xZNIoBedgRYQ=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ef9913c317018dfcf559159133efe332feb25903_1596388113623_0.3230647793876176"},"_hasShrinkwrap":false},"0.0.0-a6e564b15d8e6e862dc2ec7dd2b3a99ddf191f99":{"name":"react-image","version":"0.0.0-a6e564b15d8e6e862dc2ec7dd2b3a99ddf191f99","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.0","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.0","@testing-library/react":"10.4.8","@types/jest":"26.0.8","@types/react":"16.9.44","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.2.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.2.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a6e564b15d8e6e862dc2ec7dd2b3a99ddf191f99","_id":"react-image@0.0.0-a6e564b15d8e6e862dc2ec7dd2b3a99ddf191f99","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-DsBYVO4mfDb4S0y5CBgIqqORu2vzquHjmRJGpN+0+mI2jI+yYZkfZFtZV6jg7m9ZsCJGjW8usD9aEA7vzTgpUA==","shasum":"3a89e68e854172dce5b833832286bee4811aa6a5","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a6e564b15d8e6e862dc2ec7dd2b3a99ddf191f99.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK4mOCRA9TVsSAnZWagAA6nYQAJ0N6zsnhesNfBraEMAE\n+KyI9wltgAJ/3QPNsKeDYr8P1bCuWl08qPDJaN5NOUUjgUd2Hd2YIkEN3cHT\nZNMsyonzZ+HXeX0g1ZsHSn0268DWxt2SsX+MOlwDhTTYflRuEdZ2aI76v2JB\nBbRgbFNo9a0IktkeoFxsnv0IRogOTK6bWYnDWJmA6rZlCcCzyEkEdX11R/di\n1SYDFp5zrCbBtdQM6XoI/1dofT+3XAHxuq8t9ZiBSjv3ihnTV8W39NiwMYen\ngr7wzFrzEPMFLMZJmdjYfgFCW56+M30a+t3hxHV5cG4EguhNjDhYE+jHfidd\nqqdnI+xFVKRAvMLZ++IvfXU1tvV5Cq+cIyuSif4g2bHs0EkLS7JXK3U8TBxX\nnuW/ZV0tyvupa1ZxvK/l9otHJbd/pNVd9tf4PwmnJQKgj2TkxUACkRUaMMSP\nRdAFj4nJMjPdpyiNPdHiDr1kx63aJmY7Ohl0q4cNrh6lvH09e6d0zBQEWD/T\n7cj0NQgiCHMHSrIB78wqI10YczLzIk3g7XnwE87NRXv/Cxfi8G9YNKVoQIbc\ntsK9YrgDXMbM1vpQGco1pzf80AnCuhO14JuhcyzONzUPKB0HOPzz6adQJjtm\njCsVP7mV3hnNagqEqIENn37yS/aWS0B3f5/Ai1iT1GEfcqzpnYDKrkHRq1ni\n2B7P\r\n=WDH/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiQ2KccAo5LB7ammhOv3CXhpD6B6qsTSqorxcyyS8spAIgGKDaSeutpxodQ0GX3kvD58Bjrz19O9/j7ODYxUpP1Yc="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a6e564b15d8e6e862dc2ec7dd2b3a99ddf191f99_1596688781368_0.2469816293985445"},"_hasShrinkwrap":false},"0.0.0-b77ddbb4ac3626b214e01e0196e36d3d1a3c538c":{"name":"react-image","version":"0.0.0-b77ddbb4ac3626b214e01e0196e36d3d1a3c538c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.8","@types/react":"16.9.44","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.2.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.2.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b77ddbb4ac3626b214e01e0196e36d3d1a3c538c","_id":"react-image@0.0.0-b77ddbb4ac3626b214e01e0196e36d3d1a3c538c","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-v55vbUXfEjYxUlRwc+t75xC0RK4kNdwgb6Sjpvc5B5/9av61DYMfsKKJng8ECXbBQSYgyBdZMKFsS4rrC1XauQ==","shasum":"fb8cee252e5371e6621769da91ab2c568d7b6792","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b77ddbb4ac3626b214e01e0196e36d3d1a3c538c.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLPFmCRA9TVsSAnZWagAAFMsQAJovmS79JPBYfP3bOdEr\nlqQa4tLtBj8WQiUH5oc+Yl/GqL5fY29I7E0jTnBn5N2QUOMdM5PKCMv4GBFl\n/80UTIdBpNf5pFB2ggM/ze3UNauLSTBNErOlWiDA7Ii1BwC9mL/aOcZGBZz4\ntWqBWHDcAVh2TQQj9lStfgB/CnSD9Xa7haU5iciufiMuvOrfmQuRD+TwohFn\nzZCU+41H/SRdC7HCahyvxUbQu/fmghAYJtBUF6cEP6LIaq48yqtqzRTmzmqZ\nZpP9NomomcqoBp7qTTZCPicAnrdRtQsMtC1SRvOuSGKboScgnFAiyt2u2BJN\nbRliEfCdrBqw6R0SLXxIg5RI741RxHMvZ82Qi9Zcbvs2El5usz7WYVDQvznG\nGLVegGbrdz+bWleWgO2pk1f9RoDhMlD6f+NZqgw9Aolyir1kywaEPR8SYhW5\nuVMqP6pgqW+I3PJxXRmoAaMHy0Lew1SkMt3vA7cbCD851FXPWl4c4JxzcLvF\nAtNsFa56afST9XGm7BujPtxW+3pnYRlrmRdP/5Q5hL8PPiwCcJUKdYViAJpf\nmuntEriOtzt7MjtHJ2mkDyDfX2jAeboK/UNpTI/VEbsCLXiXeqwULhoIp26H\nER3r9rLLeQGUXMSEtqRMuy8ithlKwQGqT0ghZsBlLl6qW00rebFnIKjfjeWv\n9Efg\r\n=sNme\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKGR0/+1SR0HWL2hgzXyZJaywkaji2WGs211948tiSFAiEAkW2VCpJx5jxj936OmLem2V45wOkTRAM9sio+VTCdEt4="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b77ddbb4ac3626b214e01e0196e36d3d1a3c538c_1596780902135_0.302283371671598"},"_hasShrinkwrap":false},"0.0.0-546e16bc6ea5e4465881ff788640fc0c99a4ac6e":{"name":"react-image","version":"0.0.0-546e16bc6ea5e4465881ff788640fc0c99a4ac6e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.9","@types/react":"16.9.44","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.2.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.2.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"546e16bc6ea5e4465881ff788640fc0c99a4ac6e","_id":"react-image@0.0.0-546e16bc6ea5e4465881ff788640fc0c99a4ac6e","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-EnCk/0EBy6QwTacOQfbciVBAbwIxqqmKfgl8UHgYLWBO7QOLyMcFw8uXkRw6Vgn8Fj/reGSVH7UQrGICNzwILg==","shasum":"985e3a3f4fe4885a79dfb29e84914545e5e31963","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-546e16bc6ea5e4465881ff788640fc0c99a4ac6e.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLQRcCRA9TVsSAnZWagAAKFAQAKDK3w56qctB79J7egD+\nJXqv1CzBfutgjbI+V2FAJuaDRY5uNkjglxKBIkW09h4wkvhA+8SujOIJsZtQ\nvqhuwnWFRLyw4di1yrx4Yx0PEFrIaBdL90v/k4zVooNUVBFKjE257ZOeD30I\n4WmCBlsudY+necoFHvN1tAyUCSQUZoqTX/7i9Y9QJrK+WwReXuFZf0EMqSfI\nlehT0MdFN9r2raaq4/G9eHp00Fg+sWwF4Cehm33xA0Jis7weSzv9h7UHtMQq\nzgIFmDFpp8tgf8wwcIb3PvDf8geRNFORQSkR1meyVYkGFgQy8vNxSQLENItc\nWnoXEbs3HOYueQkN6g2vrJzq/M4qyLTyNvvnwEzeoIuT/6vpihE8vXZXCiBC\njJwLjjkgtRMa/bhdnxaftQvQHsWaX8eV+LqWkX2eFtDIR/6ZBBZDc6cVGv8X\n/VNy0E9+TxlYTMeEtUpt7aiRqRRcQVcZXdMjaYQs7LknHnHJVk4AuK80+Ghz\njIuQI/Ihs5AIxJIos5h399oaMKVPIjh4OrTYxZQtnmLdiOB4xFvf2/AVYYXF\n2IgVI+MhJKTbeiYOnyrIwdysVbwl8BACjfyGhxOAdNA6StMPp/fv5akVvn8Y\nmqPraxOmQ/d07ZaMwq6knmQFdsDQw0VgtqQFIeHC9a4JR+/NctUHGck4YMai\nbzIa\r\n=sDMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDryvsg5Yz6oSbkoZa6NNgo7ywBfNzybpUv2+MaLLJAAiAAzki1jowyQA1yDrXMQkVkagplNcAWEzfMRwO5nqPnBw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-546e16bc6ea5e4465881ff788640fc0c99a4ac6e_1596785755731_0.894221042448698"},"_hasShrinkwrap":false},"0.0.0-9827098f0e210eb6571926ec5de57c28b22cc3aa":{"name":"react-image","version":"0.0.0-9827098f0e210eb6571926ec5de57c28b22cc3aa","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.9","@types/react":"16.9.44","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.2.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.2.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9827098f0e210eb6571926ec5de57c28b22cc3aa","_id":"react-image@0.0.0-9827098f0e210eb6571926ec5de57c28b22cc3aa","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-MujEwjbEGCZWPQN5TKNvm84roEdKJpikljd1QBbXt9M4AraE0KjukXWyKuToeKhRrv2f/z6dzmZVI9YaIrODUg==","shasum":"8223ed720234ea4c32f2d25e727536b4f76c0524","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9827098f0e210eb6571926ec5de57c28b22cc3aa.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLylNCRA9TVsSAnZWagAAxfkP/iaanX1cDVDQK3+h4i+M\n+D5RANkzlWhnWy7PsHSml5U8T773bOrpQwMpwK/gmH76P6txhxVCGIAQiiqm\nj9GI8EM1hVwrtqhXQaRCaw9kIII7cYdN1bzGbbeHBZP8GOMQl9RvmYwD+pAA\n5PPtT5qSWdGq11NPvHayWo8yPm8gVSga506/Ezs5X7AccaRlV39Rmnx0ev4B\n+ssthH0KKJZXY65w0JbmAeCtihBJfvAPYXp7Ow1LIVQV10/Kk0mCAonzNqqD\neH6XVDeuvmDWptmajwTMlTeRhpB3usNSXD/9Q9yzAfGzAoeuSRiOp1MzTzKR\nie5dszYJDD8emTzS+cJ7N3+AVZTHK4v8uYinZo1WbutTtSu0UPvKWeUuogxo\nB3U6nZlHc2ki6DG1R28NuaFC51N3Qx631BXM2pNp4SAtI5snRKfz3TNbGYw7\nvDRa+B9sfbDgajirmm2cYJHxtQHfRBsn2SL0ZJlo+SQYtQyrA9uG4LTyPSX9\n6ISxybmmAPMdhuhoB4J6l8iOH6PPKpaF/6vWgGrC8+90EB4/YiCsZJSD4OKi\n0lYGcVjNoCgRwtCKHRac9yf3if9UUP1E+1tDsaDxPrOkt71x+PgynM3V7lnM\ndhxUK5KEsUQdCLSQ3ohOblXNlWf8Q2n9YkCinRTILZOCOtz9Ku7SpWQG5zov\n0yBY\r\n=ZsPi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFE3SrqS/R3UG+XzYQ3KuoTrQNJCSr/XAedQOQ1PCc1VAiBrLntYQvDvRjZQQtNnD2fFwtT9yKWqgL8r71RO3SZY8g=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9827098f0e210eb6571926ec5de57c28b22cc3aa_1596926285394_0.6486772726832206"},"_hasShrinkwrap":false},"0.0.0-6c43eb17dd9508501b14c2d18250fd75dbad454a":{"name":"react-image","version":"0.0.0-6c43eb17dd9508501b14c2d18250fd75dbad454a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.9","@types/react":"16.9.45","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.2.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.2.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6c43eb17dd9508501b14c2d18250fd75dbad454a","_id":"react-image@0.0.0-6c43eb17dd9508501b14c2d18250fd75dbad454a","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-YMugSzRbrU87wEfN46OBqnmfAIDQ3J1wExo9evz1UD1yuUUQxiY4dQhqIdZDPmSCHzEd60EncvfBIBOESka14Q==","shasum":"81a1c6607d8d06f07111ff85cb225fa32327d4e0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6c43eb17dd9508501b14c2d18250fd75dbad454a.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMKHfCRA9TVsSAnZWagAAKZwP/RCDFTY2yhjRqwbSUP7Q\noQ5YMjUZw+Aj94UH4jd7QetHOE7xC6OOSGa80zEiAAXnGnyXPfje8+Az7Ogv\nBV2h56FR84m17Rv24WzvSQcGTjl4cHItUvSdXG9G9V4YnCRThnP6XGupxr3H\nd78FW4RSsckgWQz2AeClz6ipUMFEm7a5ZW/jMUsL48K13S/tq6cw70gvT5e4\nWv7dZVyVoW2ll4qZ2eEoEMJxITPB3MygQmxiHPPaEyJp7Fd3CPvoItMFLdkR\n7Lhli3zpHOJjlN3Mt+02+4xhorC40PGzb4xMpLvzbFS4gvpnLV65FV9Q4pbK\naxog5CcTzl0jtNZA1grbT04VeoPiIDRhcVPWg4AY1qzOSiw6UBsFMKpsvGbT\nXt5G45ydF1sLz+74pHUoCRd0P2o8gIOvRhcsZ9XDDw/1fbXsc8Wp7EcFs+TX\nSarVAP+sEjpxVviKwFROSjxkjSyNWEoPs9LV6+R0S7p6r4atjdC7rBudX6jK\ngeGWLBOs2fOaBaq8Ad3V2wbhteMQ2oK8CZOv8+Vh2S1QWYe84uD6t09aG3+4\nURuHWwG9mGAdcnDQiL569v5V1kUO0oLILwUDEFN4ECT3kNEqz40f32fX+eXt\njInNat4CtbPBQan73ieUyx+EfgJDhd+c227LVH0+zejcT/rX7sLMRAyt2B22\n/Gt2\r\n=Esz0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/Wcey3/4uXlMxJCKxMUiPxLVXl6VKR/WKuOCbVcFdWQIgKbikGKi1ZonMy38mq5ekZiHZJOZK1I5cdXQxGmPQszk="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6c43eb17dd9508501b14c2d18250fd75dbad454a_1597022686826_0.3975454274867911"},"_hasShrinkwrap":false},"0.0.0-8794f4189e230977d6c6167079ad37d1eedc3fe3":{"name":"react-image","version":"0.0.0-8794f4189e230977d6c6167079ad37d1eedc3fe3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.9","@types/react":"16.9.45","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.2.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.2.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.1.4","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8794f4189e230977d6c6167079ad37d1eedc3fe3","_id":"react-image@0.0.0-8794f4189e230977d6c6167079ad37d1eedc3fe3","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-zbTYh/nnIHTHku0un6uLdgpdfiZbC9UUrZkc3NXGIznAcABgBAPFtA0PtpERLpsU5EmVbJP3J2p59jorWIFang==","shasum":"9b92e4d24f380840d5697a3dd11fe9f5a7d401c7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8794f4189e230977d6c6167079ad37d1eedc3fe3.tgz","fileCount":20,"unpackedSize":38031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMLdACRA9TVsSAnZWagAAdxwP/3v+0PWepM9eeuf33mrA\nI2O77r1gUjn60oA04byC2Rw2HCaoW+AxATZ2gFpbXLSGHvJsxSV0oS6ZCEQQ\nSNiN3LvxMHyOHZTkyg8AE9emRuoGJU4YwZ4EzaE6vvtFSKVFtlkx8mgZoBcj\n9kycLNL2rRYn4AhCkkKY1DbeEMltQdGt23ZIj7U/UiH5pX+tziKTRdYJMEWw\nFdOw9Jn5Y5KTW6aog47Kc9TWJEVjOIktyzo4SpczivZi/yTZJu9kArNHeHGc\noQrih9co37dDSxSXlsX/CPYTjYWiBQeAw5N28UVII4QE0w4wuOm6+fuDoelt\npRDeEfxub9FVEVygXn06tx+/yqR4RRhaZCy0e74MdkVBjm23UaaYuxypRlgg\nsY+nPcgsU99PCfYbgz/650/MGw9O/LSXGVySZJCvBatE4Ybnkv1u9/elXpLv\nvTnS5AGeagWTDRwch3TaFSOz9a38szG00liVEjwrXOlfv44BCZyRBzh6aKRk\nu9goKoF7OaL3kD6RXUdaThRtFssnaq7nnwEpubJN+2NnIB4fuZlPhvvJbKmc\nmfPNXWs9cS1mPGGrQ1O5YkwPwHLlvPDlNvqSYHj2QY7SE65l6iVBHsz/a9lt\nJ6nWbAI1+o99ZnAwCqAe4OzcOGTOcEiX+aSUUThofLQTKDbusYT9qiP58+Vd\nCuOD\r\n=FiJV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoPnkpJ1jf5TWrwDOlfb0C6OUMd3UNfEUWi+rXz+b+sgIgehhhmljP/NhXx2Us67G3aQensvItkWswtzwCdXLJYUw="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8794f4189e230977d6c6167079ad37d1eedc3fe3_1597028159609_0.40770331001122906"},"_hasShrinkwrap":false},"0.0.0-629c6d6fb062dfffa3c3d373b4dc46149c028982":{"name":"react-image","version":"0.0.0-629c6d6fb062dfffa3c3d373b4dc46149c028982","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.23.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"629c6d6fb062dfffa3c3d373b4dc46149c028982","_id":"react-image@0.0.0-629c6d6fb062dfffa3c3d373b4dc46149c028982","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-dlzYqMwkCLN3/U1aLc9XPHWOXN3diA6lc8SMJRvNNMbf4THagnJkpujTXKZN5V2VExoGv46XMgNMyrGja9jf0w==","shasum":"5469c2ba41d90c6c7fb4d13edb8725f8295c0257","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-629c6d6fb062dfffa3c3d373b4dc46149c028982.tgz","fileCount":20,"unpackedSize":38032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOJcmCRA9TVsSAnZWagAACEcP+wUk1AELGFSDFOe19f4Q\nKt3hB24+lywcS30lB2CMO/jYL5nlIJbb2H8hwrCdQtnKVnP4b7IhEdaS9wsv\nVpKSku64WH/rltQkeQyl12N/S00NmcmehL/VcRKsNLX/3Cr/IqvFEg6RY/4F\nqCsDjPVfoxbFgvVfSUvPoZxk14zjTigM83yyWnxxyo3oGCYU+Trukm49mxN0\nYOFD2eR9wUznxmYH9cQaoMfaXu3kiZx3yILIpycTvmmMlWrkjtpx60qB+egB\n9X1SlXkFT0UpQeTfVID9RoFn6eJUxSagX7h+7lqvZ6RW05lkCkofG3LjA5N8\nJL9Zmw0mGzI4eVZ514XlIw5vKxBASAmbBEaF1QVJVbCNbIj+BZxP7Lwtnubp\nBEywpaZxSwNwEYXCDYFq+n0XBNOl92dXQZNYXENZpdUDyb3106e5uwNfzEBn\n1OzHCFQdmzzbcyxafCx7cXiVTa88JKMgi6aFPwurvGoXhqjGD231s7ofz1tn\ntwnwGaHiar0iNYJkX56bTj8DoTHVth7rqnMr6h3/dW94tzO/pZj8ZWzcobqA\n9bim+e69XHjD9smE82H6MHppDYd0Ktdj56Xg7Vcrz/M6YaE1GgidnhrB/dNp\nny717XLBO3k7Sb+q1MhyDhmf0rQrCQeNi/f2qWpABs39yyCQJaWqL3ysQE6X\nDN6F\r\n=pPbf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqRRi85Vwlp0IhRLxJjCxsk8yYI7MyVvnciWMFDhNgVwIhAINe+xAAlp0xZjuWzOl13dxL1n8l14YdAQ0qMsyYcgNi"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-629c6d6fb062dfffa3c3d373b4dc46149c028982_1597544229446_0.8406439710104832"},"_hasShrinkwrap":false},"0.0.0-df1c3bd4acfb65cdec85d6a857832051cecc81a6":{"name":"react-image","version":"0.0.0-df1c3bd4acfb65cdec85d6a857832051cecc81a6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"df1c3bd4acfb65cdec85d6a857832051cecc81a6","_id":"react-image@0.0.0-df1c3bd4acfb65cdec85d6a857832051cecc81a6","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-AZScT+mu473WwpmCGu9CxYE5ksmMcwKuTG1A6l4eX1I8sOwTX9ke/n/li5oxEFolrTXJk//ER+yO6L6F3wQ9jA==","shasum":"da83699dcf4cdf0078a891d60f2b5245273475e6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-df1c3bd4acfb65cdec85d6a857832051cecc81a6.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwkBCRA9TVsSAnZWagAA7pYP+gO6nYbKUYDdLsc2hWuC\nYCDwFs0gBOLB9Hhzw/AOOj1QS2idDMAJXQhSx4/J5V33/XI8paylL8oT78qS\nydHHwM1fTZgTPNVd8kCKy2tGLqwVc/9AAoeOSCm9STxHFEgFpe+ZteKxb5pF\nPj/PniJKJffHp8RwbEKZboc/mUodDyGXA0bMaM0NVq7+jd1Q9PrFja3wyrbW\n0U2IlUyLEVwYiQa9FYoWUYthHF6vPxd5oyzg/ts0Wt7PdMTGFFqhM4xjVJjQ\nZBOh+THEKedfi9RzuIy4dnr+KTRxOVgDKzUNXXam4U/b714qjHbW6e276ljU\n0xFF4CcHzcxIpKYYDZZr3Dad9tvhlbimsf17c8n/dPRsU25fwtdoyMPvi8jJ\njyI8lM22LTtTEIIHEhKLTpWmCQQ/j9l9yFuDTdlOxNrWZXDQfYfwdF58jDZ6\naGelGIpbOlFcUEAWvhVViiXYWEkjRhVvrhhgTIfmV5ufYbOwnoD9VIYav/jt\nzy2hKq9l4FFWn+zqEyBB+uEfpG36hvA+IQJ+bOy086sSljiKtozDpuj3+ht+\nhQ0ZE+lPk/rHcjfNJAYdR2Q68xL0FGALSRkBeJKeezIbu+2gNSk9GLSuvTje\n0uCWP6AbukoANTytOp+4BaQHuiVRvl9N9b3Zdl6jFSvc0N6fSNPMQEdOFb8A\nmpn2\r\n=ih3K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdG/+IrHVpGMbWC1cRBYRhyIuTV1rT3yd+5MCT5ZlnpgIgJC8lKOvUIObLRLI2dLfOfRwqz6P1idJ3Yo9K/AXFdts="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-df1c3bd4acfb65cdec85d6a857832051cecc81a6_1597704448655_0.9582314896774626"},"_hasShrinkwrap":false},"0.0.0-f0edbcb1d2156d40da893373c26f20457ce0238a":{"name":"react-image","version":"0.0.0-f0edbcb1d2156d40da893373c26f20457ce0238a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.0","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f0edbcb1d2156d40da893373c26f20457ce0238a","_id":"react-image@0.0.0-f0edbcb1d2156d40da893373c26f20457ce0238a","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-44KCzWohkwbzGKb0A3TtcN5M+6Evr021kn5eJTFgO1cj0aQ/omzJVypucFnIrODZR56RSPIwCP7anfbsa3Shrg==","shasum":"424fb7d8508ddfab9ef12d4f21b12b7e04ebdf3e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f0edbcb1d2156d40da893373c26f20457ce0238a.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPibsCRA9TVsSAnZWagAA3DkP/00EX90Lu2cDaRhXXClC\n1EmWOLmO+WjCIFYo8LGtt9TFYfO1K5oTiFdiAYMhV+wjgGb15Joa/qfHUaJw\nCfe52uJW+tOqOPXob9BrGsaGTRgFIhcIWrC3vWVGCBKQBkdiII2Mw+u3j3+r\n7VjDbpFiNgGLpdYdMIktR4KNG6YoAIbEzVMBnRVKAIgRydIF3UojFgVuTl5T\nejl+fVbYTORQCtRA0eSw1iHW1A0nUMDR8t6Hi2P5dkjF+VcHvOF6CFHNJ0cC\nHPGDGuWtf0pewHV25XVy+56yM3IvEUDTjoPWm2JRrnBosG4IG0IGd6aNAc5t\nGMYXEcU1EC0hsW7pEgjfAlUToa67KRpZBTK0lcjEYy/4Ue/SPBmSMiV+t1sU\nxW1h5rhjXfHckVxBubareQi/P2A15IvqpFtpbHh7CXwKxSBqKbd90S961qWc\n693AXiMQklIFvyWWiM4Ijwdq4BOuVaN8jqVByM78II5bb61JfA+FIlCTBJIc\nabW3FM9OR5E9u0MvV4Gij6OGwPz49/Pc8Nc4Jsa1wPNsbE6tPA/gl0L57QYK\n/l/ddOpJ8WqwFAnHaSNfjfA7cHiWK15/69k0Xq06sEuswMwtDPMcxL6B74iC\nPylY73N42f3Puo5HmwxFq68UkFm1HuWVW90/FknGEemO3YBA2Ib1Xyh6KQ2y\nIz0Q\r\n=I9NS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTJKb0agkk1hDK59p/cBBGurpAJSGpq24HojbwcpC+HwIhAKA7r9r/qS/AayG/G4m9uyND326sQba+WYH53A1KJjAy"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f0edbcb1d2156d40da893373c26f20457ce0238a_1597908716124_0.285988847712189"},"_hasShrinkwrap":false},"0.0.0-03cc2601c20f4c3acdeb484323aa8f9cd7fdeb9a":{"name":"react-image","version":"0.0.0-03cc2601c20f4c3acdeb484323aa8f9cd7fdeb9a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"03cc2601c20f4c3acdeb484323aa8f9cd7fdeb9a","_id":"react-image@0.0.0-03cc2601c20f4c3acdeb484323aa8f9cd7fdeb9a","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-0AHuvqX38guyeOHOnq6XeWbbhESxJIEFYEtUxax4ToRRE1jfZ5m4Mho+20BeOZ7qp/uZkWj7DfL90VrhfFT+NQ==","shasum":"4aa726ac3026b12b3b2cab80029a4e9973f8d3fe","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-03cc2601c20f4c3acdeb484323aa8f9cd7fdeb9a.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP64HCRA9TVsSAnZWagAAFCgP/1gYau3hQjXFL+RJ0YHx\nbtybxKJa/h9ZTDrTjQRbOYPxVcEJGfVkF1R3VBzrbRuWpEI3Is5d4XuYQjMe\nCKUzS6kpCkaT3NvqiIg4KROgIX1NhmazuEnh6dZNvdXujtcaHp9XkZ8cm+Qd\njxQ7uSG+38UWnZtwSjyGSxuK63dJoQXkjbDSKt58WC85R233HEx1Pw6QZ1a+\noSeYSHJFpJQ2lFPUqtOVwhrqbCnzHoOzYq8HkQlKuWnI3vTr2LjXkd3hmgop\nLRHbW47CFZyAlkA4DcfNbdM7d2e2WZ+n0wPyufKmfUcPKfnNqw3C6/DVgxbE\nMixVwKaQFqe0be8+SjNtdRAHf3co+TvTxRA/L9AIlk9esHFwfDNejFp2a1nG\nQIDn0VdRQKf72VDlwkfg8yHPgfnZ/TsUmDP51iS22fh0rGvvxwdaYYSdh93R\nuPBkVwCihsa5OK4W0SY950VjKbYYQ6X+Q7kIwv05utV+KjxmrQBi6vFvKKHN\nryXdfwv57ldhZH708xLAuSMKrX7swMax1rhxIFzjT/Hbe5o1iHNIOMLkxM9G\nl590k5ZdPvySeFpfCYY5ck68ee3rtxIBGqdfYIAhANlC0wFGbxj4Z8lIK5RR\n8Yiqw252cUhotjU/z6GTc/YgQk4+BUkofjRemaKsyJ/nDEmeYeV/X19MgSNd\nxuSi\r\n=VQny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIVHd4UU0oDXsZdcBXUPa6rR34egi/+TPmh+b+hKA+yQIgX2e07aE2lsk1lRc8LD//cQrUeKRT984fvmz/3Q9ofYM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-03cc2601c20f4c3acdeb484323aa8f9cd7fdeb9a_1598008838892_0.9859691848668211"},"_hasShrinkwrap":false},"0.0.0-4cb446be76ddace2d397d16731955cedaf9eb717":{"name":"react-image","version":"0.0.0-4cb446be76ddace2d397d16731955cedaf9eb717","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.8","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4cb446be76ddace2d397d16731955cedaf9eb717","_id":"react-image@0.0.0-4cb446be76ddace2d397d16731955cedaf9eb717","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-l1XljmXB47V8n45c3RJ2b3tLy2W3KAHXMbpLlsCK/TxlesYytT5ey9vrcBmBYZ4BssOPjDE4O1hUUBEY1/FyLA==","shasum":"49a727b77902b05506f38f5f933809b244d6a140","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4cb446be76ddace2d397d16731955cedaf9eb717.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQR97CRA9TVsSAnZWagAAdkIP/jb1ZpwV/79eOzoCgkMn\nq3eFZd5n4pv1QOrNI/t+hMWSkG7SC89ajXU45aSRAXPzj1sD9zvwTPtB1wYD\nK+n9eV9K/spyd6UDlih+QmVPM6lnRTS7b625C6WsCZeOXb/IG/1d3C4CZCfL\nMbphY68fELtDTf1/QDcEl0jKEmhqto00hSw4HEpBhplJ6WE8JdBcz0yKBuOw\nLbw4g0DZNEJw8XVG5CqhxGyLWcybXg3Eq1zUZGG4a/n5m2g3tGxBJb27nqxP\n4BPuHqwhpp/2K4Dx82G4vMiMgwyYv0m2+pYWl0rElEG3PY3qAzjRFKwSADdx\nS2UC9FZ0OmoyV03y7Q7LRctNZO6teMU1NlgUrDb00artNuN1HOm5LRir9/7c\nEo6c5ZaEmWleYHfa9JhpXQFbEfGqzY0uTqWyXAuuQv4Y/kajWLed1rXkgvrQ\nj9XnvXtJti99tomO1J6phmlvrB83FsMVGqafWXqCbwVaHVymwt3wcKBfcogU\nU7JJ1SO8ZtfZKsufcDEaWgI5gylPJUXgd6qgQAE50PCme1fslUYgDsBtTcba\n6DSpAs4pywdY5ZzeHzXLt15gqPjDwbdkgrIy53eG3JFTBfH/MNU3KtYq3pgb\nYDqbNu+GWgZadtPeoEg0FTkAsapqYeTqz2LB0hIFPR8Xs3MgOlFnkoPsW5H0\n114P\r\n=dk0k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7GUIbpwJl0tsE1W/AQvrELpADpL/pl9VNpfVGA2LoSAIhAMP3372TZF37M5m75xwJxV7oZHDPm7wKaS7lAE4Z+iOK"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4cb446be76ddace2d397d16731955cedaf9eb717_1598103418887_0.04502508274480954"},"_hasShrinkwrap":false},"0.0.0-7ab0390f892063e051186e16b1d793aff79e5c16":{"name":"react-image","version":"0.0.0-7ab0390f892063e051186e16b1d793aff79e5c16","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"3.9.7","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7ab0390f892063e051186e16b1d793aff79e5c16","_id":"react-image@0.0.0-7ab0390f892063e051186e16b1d793aff79e5c16","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-3LR1biCjmg8LV+LoUz1j6vJGrHby5LPUqezlA32hBuXt3JSMv0q+2mqoRd8Rg0ALBLo3yWXYs5m3NHtQL2rHmg==","shasum":"6671bd204e3a4c9c4a4df294123d967b9f8130f2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7ab0390f892063e051186e16b1d793aff79e5c16.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQSudCRA9TVsSAnZWagAA7VgP/16DoffU043yyF7commh\n/nVaXwyiyT1+hv3dTdKg4E1R+448xW0AhnWzb1Zb0WUCFuejBH869C7GjGR3\nXnbTIUv8nIKH4TaaGJzOnIvB4iO0DgJWZzcSxJ7FMaVMagsMETpq9pxCrmpv\nq2NgDXkiRisvvCh3o7T3ROFcmg6qVycKakM7DUbRtEcMVSuOXMknGtW1AeOR\nEYKfUHaPmNX/VyYNdwW8od4kdYexZ2nN89yoDUTlnS6/LNP3VEM3j24GUw0/\nT3SvA5csnWxCJTmnT67L/9dllNU5p9D0BmKt92Y8+IlxEeF5wVXWJQpxLchU\nfuisDx1vtZQL85rHq9vwVkIef7nvAqzVBEHmKzFZ86QjY65zT9x4gJZb7G53\nqyehhd1m+RlEhuLkofOPaTt9xbppf/Nsk6j/H94ZYrC8+ZLcItYeUaB0qnj9\nYDwyrXHl+FFJPEGFAV9gBHWV2DhQCLpKVe9IO6rlHwAAE87G90Vl2hni8IPg\nqKZNWfAZKaTMt5CFwKOhkhBCFVf5Wc7Q/i1f1LFKyqI+uaxOD4qroKEqcVFU\nQFTnykt+N85huq2tlVYpVWTphIoJ1UoUtR7EAp0iAuDD0/DdIfODYxLKQt4N\nLAdwll4/sRdaOxFi0KVFQYi8wynAkH2j7IiEG0uGUpqQycsjNP5zo6RQ/gvZ\nX2q2\r\n=Wlle\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2gxOGgUXMkw6V1Cj1ybD/NA+1q20g7OSgwH9eLZGBgAiBJQ9smC4ARmciwGe6Dbz401Wh/MJqbM6t4d4SpApU7Gw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7ab0390f892063e051186e16b1d793aff79e5c16_1598106525340_0.051313157999053116"},"_hasShrinkwrap":false},"0.0.0-69ac22db6b25a6703891cfac9ee81fe4f8596e39":{"name":"react-image","version":"0.0.0-69ac22db6b25a6703891cfac9ee81fe4f8596e39","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.1","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"69ac22db6b25a6703891cfac9ee81fe4f8596e39","_id":"react-image@0.0.0-69ac22db6b25a6703891cfac9ee81fe4f8596e39","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-sCSvmHj+k9xQOVhtTgoceoKa3xP0b/SXevyubPUJVGS0W1KxP1g8HwPETXmcmt7qTQC9knbZXUA4BlC4RWKDfA==","shasum":"26e8937423cd34fb4c8245f2aaaa3181bce84741","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-69ac22db6b25a6703891cfac9ee81fe4f8596e39.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQTeuCRA9TVsSAnZWagAAs6kP/iLIw8x9tiipN2cEtx+U\nsTYyPzACc7SFziTIqU+ZIm6KoIAmAgdATeC27NuU9XBv+7IPw0CRU2kOQ0p0\n9Q7xQJDXk20B5h1SXPNNqEMKmXVq8YzHXO6pMOe6/WVPqXSnhCBZ74BBMLgI\nVbXSJ9BSEk0Go/dKl6ho5jt6IN5hxtXLvvGNJeDPUsznxV3WbNOs6gdmKm7e\nuthsdakBdgnrjNS5uNnwEL798Dxls8lntV/9OvWA9diITD9rzFSHu4bq4CwY\n9Rc9brqqpP1JcLjAu9cii3RC4ClapWypthcY6iazwZTIIePFqsRahAVSCfds\ncj65UNT87IcWWfi6Iacj/LGr2UMv1V+eVz89pdZaUP15Am7UgRCr7DDT5w+q\nD9aqGnzL3kI/LdBHSA1d6Jm2vjeaDnm3zO9NFIBLDVyk13IDeiAQBReUaGOO\npEBJIWEktJyPd2ZW2LRTXaGrnhtVp9ZLFaJ7tv0wUJYXoInhbbvYyoLNsw9R\nDB3Z8csTOWzDlC2iQn7EBhGABzFexHVkpQfZutMJkUAaj/i7hhqLB6vWzNtd\nxNBeXXbdvZ5fVb4Ky7P8fLPyYBDsctkuRhk7ykiMmrhN4YBiac2Jn1PKTdKZ\nta1Kc1h0HHBqmxS7w1/FD09PRXyLFSag6u6jWd/s6wsQWZ9ccvcMsvZBU4Tw\n6AcL\r\n=qmTX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDluEamWfduY0DZpQpyBM7R29r865kR5ncDG10CJSWOawIgaoYgg/KwlvPHV8pWy3TCH6HouSBU/M45nIQJGh7XnWI="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-69ac22db6b25a6703891cfac9ee81fe4f8596e39_1598109614410_0.9869754499509664"},"_hasShrinkwrap":false},"0.0.0-bb1ac1b5c523ee187c0a9c78572a618208d1f7ce":{"name":"react-image","version":"0.0.0-bb1ac1b5c523ee187c0a9c78572a618208d1f7ce","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"bb1ac1b5c523ee187c0a9c78572a618208d1f7ce","_id":"react-image@0.0.0-bb1ac1b5c523ee187c0a9c78572a618208d1f7ce","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-SKP3w1Uib3yNm4DvWvs0fUctmgvNDsQ6uNk70kIFVGki/ewIl73a5mose89G8sme7i024ei+J+62asHf8aXO6Q==","shasum":"2d6880c125cf2c646e7c3d646e1a76aed832f72e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-bb1ac1b5c523ee187c0a9c78572a618208d1f7ce.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQqmFCRA9TVsSAnZWagAA6H4P/2Cr5Vp2mvRXCgS29e22\nrEqfrlLatzv5cGGWWLpstdbPopZXX6eZgm9cFvY6OwK+jt0+FYy/FZb/QTrR\nkk3ginajbHWm3nsOp33ysKoEUK27C9isheQfdC9tmWvcGwEycopXRIk0Ldch\n2eOggqyOgCYdyf/a95mkaaZT45PeRtbT8wsFRECyVyKpt+z1Ne4/YFFN2upl\nsCkrUpSiG6IGgysxdcz59VazVZw2Xp+EvbBYh8rykLuCi1UDShH0IHzYWz42\nP5evHzOtsLVR+3ExMO8HsutjzrSz7LJeZPavE88WUlZ1tGQJanqj03maX3Ww\n1p6ZsXwjUULjeCDqrm3BUpCbSB6zdrQf7t044Drn8iMPcVBjXMOZ5mYuZSO0\nVaVWZ8keft6OygvjNBmFJrjANTq0g+ZXROZ1c+SOQavbQ9glchxGW//lgI0K\n/SOwzxax2+wBQcoFtidHTjlA3m+NPN2PRTMFeqjCGZKika+5A1bZ1Cb2DSLn\ni7UHq3gmpjoNbnWsrF9PxrljoH8DcefHY81JbkeogSEMpga1s4WjfxjBUkhl\nwb6KUZriZuuq5TpzfQ8XNqKcILXJS2aK1e+P5+TyhNFaLd2oJQcmub+93vfQ\n4fOa9u2KCs8YbNxYDTk/GjRbSk71b5QBddKf7zbtoIFav6/s3mpuC2gM5gAn\n/ZqM\r\n=NNSs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV6/T06Hqni5Zz7ZnWQjIjIBA6UrvWhSnhHO0jOKUJ7gIgdC5gHFPdrXo00RIsLHV/aWpTEfQ6wAG228G/Z+v6k5s="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-bb1ac1b5c523ee187c0a9c78572a618208d1f7ce_1598204293078_0.8689092535126341"},"_hasShrinkwrap":false},"0.0.0-7aac103f6fe853f68f0f7c889944c65152e6f76c":{"name":"react-image","version":"0.0.0-7aac103f6fe853f68f0f7c889944c65152e6f76c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.2","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7aac103f6fe853f68f0f7c889944c65152e6f76c","_id":"react-image@0.0.0-7aac103f6fe853f68f0f7c889944c65152e6f76c","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-YSAepjihkB9dMann76Oco8izr8M5sj16k1P+naYzYp0r404aHsHhTy2wKvwxC2zH6QKpDx02kaVlWzKjZLwPsg==","shasum":"dae0c573cbf8eda693518317c1277a64ced80af2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7aac103f6fe853f68f0f7c889944c65152e6f76c.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQrfRCRA9TVsSAnZWagAACcgP/1Bef0jj6jfy5Pjsfo5Z\n68IgwEnsiAWkCPzlPIYXZcRSKcUEQMAnpS8CWDGos/SpJQYX+y3rGW+OQy0o\nAa2A828TBTQ6RgQ6lms5DPkIxVf1Vehns10O/5dHLCdHZeLjMs9C2dd6F0aw\nMSGErZBm6BcxddVgH7GhArtYpwfiyKCDJs3EyM3vwLksQF0TI96djGoFmCBp\nJQyOs9XWSeBcmBvavQi+bVpAzGVeEI8WpstIHmtE3FDP97B2DrLCMkrCR9KU\nR4kJWIqFIhwyoRwJEkNqJINzEQ9+0tqEGtpSGFJozBIBK0IDq0PNQrYBaQ0A\n3wtIhk3P9cW4ze/wYeSjZo8Txmm/qptwlWBy4qsxMmC3/TVGaHp+gbE8iPfG\n+t9cpNfCSYt+ty6R4NUzvO1JL7A0PblnrgZnuRyTd+tm1FSB//0/UD+FmITa\nIK5IwKDoN99zB9EiB7eWSVZfEIxC661oK2UgTW+m2+bz2bzXt8zLXzUWxZqF\nSwpB5/Y5u/r4xajbbHKrf2gbBaGUT5ioR/UVvhtAvufxaKOqB7BU/FagRAq8\nT77ogTz4A1KFc636/YULQiRfswkRZFNmDJOQTzgRnFIwI8XvmyAhfdit7NHI\nDZ5/leYF/8pN8AkksOswbw3hB5WZ2/Q0EM/dhiuIAlXiWafsXq2YoOEl+Z/Y\ny7c6\r\n=zbMt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDdIjXl84iq/qQuSWuGVEoqBn3G7u0Q8IrFYf4QVSTQQIgbMqXO0g3MuI2BwNHFv2ZthdJPWzcN71/Kh0uRZ4k1qA="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7aac103f6fe853f68f0f7c889944c65152e6f76c_1598207953041_0.9997857768065348"},"_hasShrinkwrap":false},"0.0.0-d6e62b36c6d8be90280c3f84b2baa417042710dc":{"name":"react-image","version":"0.0.0-d6e62b36c6d8be90280c3f84b2baa417042710dc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.46","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d6e62b36c6d8be90280c3f84b2baa417042710dc","_id":"react-image@0.0.0-d6e62b36c6d8be90280c3f84b2baa417042710dc","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-xV3aOi5gmW0yPRGxBm1Az9IXGfOHIAjNCqiREpykb6gkxeJLhQwgL3/XPI7WoXk1tmxaejhfK4OJmxkT4ugKYQ==","shasum":"e09f9bb2e9d79708b55aac76e8fe8b4034c8dfc1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d6e62b36c6d8be90280c3f84b2baa417042710dc.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRPv2CRA9TVsSAnZWagAAIFUP/1NnRzTm0n6NHPBOVZGT\nnsYWlaa7MyPdD3oSFxwa4rNvIMYdyYXvWpG9wiCqetzoXU37+oA9q7h+kGoU\n4Uoy3jFqybNIesfM7jxDGx9l36Yqp5F8JkzQ4S2gJaoiw955G65b5/4ZD2ua\nkwDNK6HKmRGba7pUiGN/kCr6i7ngSnl78VLRV5cEuRgbBh1g/c8bDNb9tFfd\nmLGz20+fXZ0mvVobpVnDIAjKMQKhpax8fxy46bn8FDURTBLMiUgJlgk3+iW2\nn9oG8suJCXO2VmOyepmsTaoKDX7XGnkUzsNK1+VXg//kbvRM0VLNj0RYLNrf\nBYzeaJpSP8Q81C+PRn4NSid5UnBJEgQQeu2+dyXQitMr17VipF4+7Zg9OyIw\nnozpa9utLFxJvGuBiK8cC+8t+KYVqEOD22gzqGQIOrouzAUyji/Pqq3nfzKX\n+EudOTRtC7SCIrk/Q0BIwBkcIQm5Y0zWyjM7EDlqcYOztSFr8I5bLKwej0j9\nKyDH9l0BJSULpoGtmXrMz29sVM+nZHNK3bWSn9GOKtxQKklIVFutZu09WpCH\nnqXSAbwkYxaq58GKIM+HnPVFy+0tLHY0lO9GJHMQNiBOgiNwgDC9NhCRQtBV\nejcsMq5i+jxp2jtjq9AtEmz8DwiiKOnlzvssFYronM61EfpjmM/P5L6uCbxt\n7ktN\r\n=aI7X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHx0oEzlhJ3roKvFXCE8LZFziY8QqbdMiKuDIhVolxMEAiAezVONsHihjoKu3GGThmHOsgftqYpTXeqKsL3HQJvMuA=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d6e62b36c6d8be90280c3f84b2baa417042710dc_1598356469666_0.8776146222679249"},"_hasShrinkwrap":false},"0.0.0-33b8ecb7362ca947208de1d8897c4d75ae5cc689":{"name":"react-image","version":"0.0.0-33b8ecb7362ca947208de1d8897c4d75ae5cc689","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.47","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.0.5","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"33b8ecb7362ca947208de1d8897c4d75ae5cc689","_id":"react-image@0.0.0-33b8ecb7362ca947208de1d8897c4d75ae5cc689","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-TH7S9t3fZdF6qdp5qoupLHZo7W29YpOnE5g/E8cvpr9Y99FlKxjhEQOvaCcS528CeuYLL5LuIQDbbWOrMqPq1g==","shasum":"df364f5ee663587cba53dc0d1585ad2702ff9634","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-33b8ecb7362ca947208de1d8897c4d75ae5cc689.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRniZCRA9TVsSAnZWagAAlBcP+gMb45Yyxo6Q9CWCoRFn\n9ToCqV6JlDuVhSmjf0WVP0pa57PAPhteSKWDPDbdbpQNuS5pOVui+OLMwIV2\npMK7OkIwNUhUnkuP4Tf3lFR5dWYDX764Me+dXBA5cILfu2gELsALJUo+BUqK\nHz93VC1twDap5U63DHtMGAaWJPZZaVuLXfhtMcEOO1pi4BmT1Xmxi3GEeRNK\n0tdRqTW58Q+0F9UrzeNB+l51u5Nf37V5ZJvqVbUBz1m7+VYZO078ykTA6i/T\ntJG6OcOTeuPKLxSAx1jZJTvIZdWTfFzOprC+LhPZeTfeBQ5zV09TLKHBf7HR\n61p6/SL8D6vcVEXZ9SD0zPRQkvFM+5dlulcOxSgKG+HfXle7l5haFKKEp10W\n4Tj2z7V7CeV8Vc0WuMthpkMrDKjLHH3A6LWfmY0tFgZS87BuuAm2zU9q7Kyf\nnlC7/lUfq2BMeIRJ2dHEaG4ZTiV/lBcjnUS54ETuMoAIyKM+aUxhJDRnadSk\nyE5xG/2IN7fYdiwI/C3QVKFs2lcXrosdZUO2vfPF1aBW9LMqH4uhLwlwB4sf\nD68ZrILT8zKy1KR8PxMMHVqlcArtBXPBlZbES5yyejn3apDMQ1WwHgGAlfr9\nxyKLklCStzOPakSZ86OQ6YT5QrfZWhN73NOEoKoanxaefVDChJNa+cte2RFT\n+fwx\r\n=rOUh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0oMQX0zthmpeCYFerLIwyQu5nHR/jkx/SPbaKDOiyXAIhAO+hdg8V1wegCi1Uf0gL6Qig6Y3JOLPdcIOqnwsE9K1H"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-33b8ecb7362ca947208de1d8897c4d75ae5cc689_1598453913015_0.04032196304032887"},"_hasShrinkwrap":false},"0.0.0-63bc677ca6b4baaa1c4db38637c7e16f3350dcfa":{"name":"react-image","version":"0.0.0-63bc677ca6b4baaa1c4db38637c7e16f3350dcfa","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.47","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.2.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"63bc677ca6b4baaa1c4db38637c7e16f3350dcfa","_id":"react-image@0.0.0-63bc677ca6b4baaa1c4db38637c7e16f3350dcfa","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-9uMJBGJygZ7g0trJdDAy8qEe8R0sdgmQw4RnZAPTCjd8DvD6NaG94WnIjyy71Xh87uGnCb34Avr2fjpY0aE86Q==","shasum":"331346155dd28a145aa718293578128ddab6c091","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-63bc677ca6b4baaa1c4db38637c7e16f3350dcfa.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR/I1CRA9TVsSAnZWagAAtFMP/i04LQBa7vtEqcRZSXts\nGxfiiTPlkZapF9q6jv+LpUUM4/uBEoKx3ZQcbKfSwPvbOb8S8dK3YoLSMGDf\n/Fg2/6ib2/b4BQpKvRjAbvi6k+RZIj/RsWV9aS7NI9G/ksXG2iRpLJee/X2d\nB27TRE1zmvjDRhz23OHrwYOsnUYQmu1ZyN0kyU3Uf+uIH4OrGvBAl1QmLyK9\nxaFnXahrWvJ8ygDVLjhCXOtOXymDk7naqNT5GoFUk3841IL5zzDG/Y/CKH7z\nu8f6ypRZ7oNV0JA1poRIuTzYcaXPP5R0b0y9O3mVY3nvp8BlS3vOkMIxbTqT\nAh6rRm4fpNl7cRhuiPTt10/iP2ueMhzWLy6SJRlbkc56vdrjPv75F6SOteNO\nvZSaGjAM70h6AcJQztAnFkoei7EYgXkYmIRpb+/41The0T2IdhsfXt98QxdT\nyJtdGXhMrfkJm21w9yA57vm3uWwIF9ZTvK0z0u8pyVIJKgHk0/SIwffVt8RI\nz4KDmPH6ZT3oQNJ8o7Spz1spWFFD67+NA27POLJUEdjVcuiWyfqReO2dDSOu\nzL7SynyTvpXqfPRjwD9fOj1ust+eFe7pp+tz8Un019ffGtXY7iKPJ6cZ1Ci9\npxvsES9OXr6xHrpV6qfZrUhBq/qoAy8WvmKxXl0dV1HBa61nte3l9M6Cg7GA\nbgJH\r\n=6R8O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTtWPm1VnBSCbdmqyPOego8PvBdmQTrR5LxnChQzjIdgIhAKF4wTh0xuBavw4EM8wgUroRT1hoasMuHr5NrET6BnMN"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-63bc677ca6b4baaa1c4db38637c7e16f3350dcfa_1598550580815_0.7962943883084292"},"_hasShrinkwrap":false},"0.0.0-604cff5b06b4d87c7532935033156dcc02806ae0":{"name":"react-image","version":"0.0.0-604cff5b06b4d87c7532935033156dcc02806ae0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.47","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"604cff5b06b4d87c7532935033156dcc02806ae0","_id":"react-image@0.0.0-604cff5b06b4d87c7532935033156dcc02806ae0","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-J1Z5z9KOW264LAl9N3xypi9CGKLO8oSurOFXnzEcooypUn6DCdgnRlxj6R4/EIAU2oheFrKlyg6YjnZAaMKE9w==","shasum":"cdee8bd1b565260479eff71cfa517835d2447b2d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-604cff5b06b4d87c7532935033156dcc02806ae0.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAEOCRA9TVsSAnZWagAAHS0P+QBMnjA3pyYt+uwhJo1K\nS8jAvPjKfwR4fiXs8qDASGlJmkvyU+nvtL+3hHHxc2DediUp0sQGc9Q66uI2\nDBlao0K34YRb87bHzcYlYH1J3w21e4aWl6H8wju3vI5CuXURYvzBajp/xoQi\nc339t/m9qbo9/EU85iG+a145f+D1zMYW2MXkJmIzxYFSyV+HTuZURq0UulL+\ngz5pFb5SqTrp6U0IA46F61QoVQgUhr3xUmgOspxLFIFcgsIlmJjeM5cbxIT0\nFH5jKsY0mS0XbaYf0Si60Sb9ktyeuZTJ1Q9TliHuSmQvDTbu6MMZAHXJ90BD\n66p1cQOJTwfqvErpNKb3n8b9Z6H/WANNjpa9YUwKK1VIHeu9C4TjWtRdNOPC\nsq9A+kqJAJdqkDmdaKYHOCJfZ1mF0wloW1ay7ve7NI96dZxUmadfrhK5UdlP\niy/iqYt6x7ShA87f5GMyB8R8ZXGSVngKvgj4W1xbmsYIjDfOYP9dwB07Gk84\nKfXbBe53wN6qgvokJf3Hi7mpW5ssW9Z5vuXauihIZRx/t2q5YBQ5WV+Cpbox\nxecOoCECaZPlsEHtcCHqPGppVwtk3VPMVPWhV1GE/tSR0H4luIUiVd4Yo2g6\n4x/md+zKuGnLiRSuPK/jd1OZn7HugjHFFlkIZyirrLQ3RhIYPj91kv1oHfxc\npv5i\r\n=0sX0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCplFCJXfTduLhv1WOV01gZN5TenxieqR4I9mQn7Y18eQIgUoZclL8tRQbDPxNDIohGlAIpAnilObTX8ClavH/1IDs="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-604cff5b06b4d87c7532935033156dcc02806ae0_1598554381496_0.8604031724310481"},"_hasShrinkwrap":false},"0.0.0-51978a3e987263f170defce0fa9976e87db26586":{"name":"react-image","version":"0.0.0-51978a3e987263f170defce0fa9976e87db26586","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.48","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"51978a3e987263f170defce0fa9976e87db26586","_id":"react-image@0.0.0-51978a3e987263f170defce0fa9976e87db26586","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-K/B1ALcb2e+tnzhlDDtrxJMU2DcoKoll/16aurjkT7/KNPUvWT3Xx8ElbdypEP6LlIOUDGXR2EMjPOiyTV248g==","shasum":"48f21b988d59ddc7bdba6cb3b6b836221ffa870d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-51978a3e987263f170defce0fa9976e87db26586.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSW/SCRA9TVsSAnZWagAAOq8P/06yl1v9Sqk9o9t5EgIN\nFebDFjDfw88y73MPFIAyLr6+2SS6g0UokQkF3FBga072xVa61hrOQyyXxwOG\ng9AD+3YjfdTC4ToG9MyYLwmlMDQWEKLMfBm6H3R75cG6HHREduSrg+b/ZmC0\nnYFvYxhIcM9W1d+khHFqxMnpHWoIefM4Q4ZDlELp2W+bnW3TUWsXXht0VUxb\nrTWw0YwZcc9yFz391iLOmisJSCx/N/xzYHM5btY5FsspyVo8lWn0XsjvrKjT\nnh7JqKMAb4a6YbhfgxDlOzxOBjlAK32v94NtoJrC5uU5jG+T2n/UQWW8MmkF\n2RavPRghTKZu4dDqofJJHe8hnj8IMPHRkACP3RzetJzEVsqIZVLV5wq5ZHiV\nKnllsumBhTO8AZrR/GUNzQFzmqdqlVpuyguUfxAczdmvl1TgTB/KjqPmQbVb\n4eJ82Ntz2FGrgmoBbmwvkJm+ix26EMKJolXnvdESPTpeJqt91iXmjbSg2pSD\ncdY/FduHTK8a77ztvy60Eumo3myUmGyXoHiljVdQZmCg8u7Z59FANfor1FyA\n0Mn5jtW/3QGrhV8whu6IjzXp/6uYg7g8XJekd69TvQ9z8Nq1RDPqzZ5qcYHE\n7wFgvVqq8Bbw7T1aKneyQRXVEJfD6gYjKcfrGk8RZVc7LZQ9waFXnjHsnXyQ\nolcV\r\n=QAk3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3D3oACRqgaahwxq8osJPqVmREK3dN4QRpu7ct0wa7qgIgQ+ayWCYLU6UAC9T8QtNJwNek//5bGkGc7uK1T5eLyQQ="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-51978a3e987263f170defce0fa9976e87db26586_1598648274192_0.602296663362605"},"_hasShrinkwrap":false},"0.0.0-a68779c6ba0663b26ba8e8554afe71278c26cd96":{"name":"react-image","version":"0.0.0-a68779c6ba0663b26ba8e8554afe71278c26cd96","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.48","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a68779c6ba0663b26ba8e8554afe71278c26cd96","_id":"react-image@0.0.0-a68779c6ba0663b26ba8e8554afe71278c26cd96","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-8YypOY7Sm1gBbYrxTBy8doqVGfKzxyvky+jf1CD801yJqyNv5ZWcHA1TBON8N8l0VH6KgBD6pdI2oiNFcm8++Q==","shasum":"9aa2a7a295655da9e411478756eb5f0754f89784","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a68779c6ba0663b26ba8e8554afe71278c26cd96.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfStp/CRA9TVsSAnZWagAAFwMP/0uplD8dQ76yp7oN0J4o\nq4vvytBQ1n4eVUIpVpYbRQlgdqIXyTcdPyuUBCHYbot71V5kmx50YOXzTxUI\nm7diz9MEQQSQAyXeGZXSQ6BaLqKXK7FnMchvJC7MMKKVSw51tVvCCgsF4p7S\n+6BVq1jyNqus1E4qfuQl4trgm6nXQi4lh6VbJgtkLc6BLIPQHw00Ptajnh/Z\nUsEU9EKucQERMTjf2I07HMjNHRiDI+34mkPro4fMTNi/D7H8Ob/Ogh9kk0O4\n4PQ817LcrlpuuMBvSAdBc+2IQcVqPio4Fk+i0FE4tm6BwY1fGa1JJk0+O9Ai\nG7WqG7SGl/fOrSs2cX5v2O438ZE0DCGy0D7ePnW1oQJ7kZfzhjkILP02ONuH\nHbwLW4r5aTxk01Jmd6sg7EQTdMw0TJTzkpB1IcPsq0g0qyh2RpNCNmFYBlgZ\nbrqs+AqpQGR8s9ef1cncJSQ/Vc3etmQoHr/zgrNUAbu8dgr5/OEDlt3/c0lD\n9mwGgGA9PukoNAnI5WuoVTBjFaRSxENCLUTLYeAnxtOrcY2Hltbyop7y6gC3\nsnIzAnYNLRLiiDfxBSkEo86ew94nFvDmi0+E1+ls3G25d/fETUIHTYeoRzdK\nwZPtMoiA55h/1jciTde4YRO0aE2Y+BQxb8fimtAvOz4gmDbaMyhcJ28KFA0H\nHyMm\r\n=CTn9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOres64F30YiF3jnv5dWb+a5cXap2MJ572bkAByypuzQIgZXCm8qx7EthPh+buGl6XAQSPzDAhR22YcSZmksNdf5s="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a68779c6ba0663b26ba8e8554afe71278c26cd96_1598741119105_0.9356898709000381"},"_hasShrinkwrap":false},"0.0.0-eb4e64288d12894712c9c0cda5c9a61b48d7ecd7":{"name":"react-image","version":"0.0.0-eb4e64288d12894712c9c0cda5c9a61b48d7ecd7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.48","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.3.0","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.8","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"eb4e64288d12894712c9c0cda5c9a61b48d7ecd7","_id":"react-image@0.0.0-eb4e64288d12894712c9c0cda5c9a61b48d7ecd7","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-DZaobWxMeNuqmNCh1D2jAD0p03meidvSdKNEtC037+E3heGGW2cr0qaERCZM/75iERNoqwhCqIXT/zW4+BSVkQ==","shasum":"2c6b8cc752d7342b668640fc57b176f379eac379","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-eb4e64288d12894712c9c0cda5c9a61b48d7ecd7.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTFXwCRA9TVsSAnZWagAA4BUQAJkJyz+L5jRcfuRzqRed\ncFwKXdxWppha0gjvcnYlpVmZurCZMaCdOb5Uxf4nVt0PJ7DigaVwGf2ncHpi\ny+4yP6FoXgif0FrxO5yhcFKGZz6wZ8Sucdv3NgY8wzKtB7+FHEo+aMNRam++\nTfAu/WnF4LcXJB+r4F8/qFAn8kqXXWN+xMZJCa1FuopLsMKACsqZdi4Dydvc\nn5pR2Y2eL8tmSsWKr6Dyl2zZj3Of5FeafJ6GNgDNxe3ohm0+3A8EX5+DbDgn\nb1opddev6mm61Nb1nq00gF+wTGPB3FR7EcXfDvzzBFA7FtJgooHGqIvNzkwY\noF8M7kX6LHWiSfjKOOk/XNoE6xrjDYS2603mym1lOSPlKn+HtDwk1dkPWAvE\nQUKngnRk2oSr4/F2vzCgENjJDFXwsVTGs4exJPKIzIDi1DNxFbnYAyUAliw0\nA+tqT8fwOavTfFAC0AzrAovKLFDYgELlYPoMU1yGoAI1hfrmAMh+lTME36wv\niA+TAYD1aMxm1V1aPZ8TuxbZyUJMtCe0QQkuZ6FuHFAMw4Pq/fHsgxT7BFAv\n+/qNgpb88RCr1VHBr2CU/08wUjMAtGoe9Ragq0ksuLXOtHAnFaIrmnioIPRA\n8u4pyLFWj06FDk51Cfj3c16496x3ksXQU+AT1M3zfYWwNFAPmcZ0YLtsTkYO\nZzus\r\n=TH5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnsctAwmC1MaUPEsb57s+8zfw3R5tIZ4WCZzHrXkZCzgIgYje9DbqBqHsHNxDL8zvN7tgdsghYVlAgrWfjGvxVLDs="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-eb4e64288d12894712c9c0cda5c9a61b48d7ecd7_1598838255986_0.7577088413891595"},"_hasShrinkwrap":false},"0.0.0-0e85c45237eba33e35d96732d9e8b55f604eb7a4":{"name":"react-image","version":"0.0.0-0e85c45237eba33e35d96732d9e8b55f604eb7a4","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.48","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.8","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0e85c45237eba33e35d96732d9e8b55f604eb7a4","_id":"react-image@0.0.0-0e85c45237eba33e35d96732d9e8b55f604eb7a4","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-azTua2oHqty8+T7l+KTrwNCFbHX1jWQQ5+3fAyJ8R8pMKYWUsRX22G24JXN7KCZhw2ZjEeb5ND+cftZUz6bRBA==","shasum":"69d430170a1e8be78a2fa9fc2cf52a5693591e3a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0e85c45237eba33e35d96732d9e8b55f604eb7a4.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTcLwCRA9TVsSAnZWagAAeokP/A7XWo/VK6lF2Hd9aJof\nG3gN/ZgAqPNSklTwx8BQWorL9USL5hNztMQm0YatCRXhx07/VTxgnUmTmJO6\ng4zXqeEEcJkyAIlJvQNsYK3wyGWnyhlVJLzqoaOyvkxfkHs38S9o7pU0came\nyJtJVafT1Eamh4Efbcki6qyyPaUeZ/o2/5tYKZLD1pvnm5fqmKFqiugvuMPy\ntNGqOVvQJdLjhkxTLkle3lRGdp/qUb0skQ/wrcjKY2cfKTlPfjTX47IjCXi/\nboDSTrg/Tzw1EeJ5Y5OawyT0wNeodwDAN0aoaWq+bK/ay3lj+AfcYxSP8l9f\npOJxQUv1Kp7x1H3etodPx/pASeffswYd4PL8cXUlqrgMMNQ8S25AKskHAJxe\n24k2wsFjm7KeWepA/1F40APNjpcDzvy/NYQyQNNjZcJhVeBh0nvsK47zZi/W\niJfiHgsmpT2wUhCqaWsoGQW3+o4bPdJo71phzEcuB1ACdGfSBpMkmV/pl7KY\nrjgd0Trb3azvu18x13Ylywxd+5A4J9Eb1EJcsOLbA/AbqLj5w2rrjuqZ0efX\nBN/pF4LXeKTllffrNCeRyeiIKiLs9vhRwF91HdPbsdy6nSNvi9WXsf32HBhq\nTRgpDAVC5eWg2+qOKdLhQWXoSE5zntU1uT4dktLQ8KyMvPMw1pZWqmrmG+za\n9syp\r\n=C1/j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHuUg1zLEuPtONDYIvwZAOWzjxq6mHESspKxqFOsy/XQIgWyZddsHhhiqYNkftSpvisteS90PgogJYKxZxL3qm21M="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0e85c45237eba33e35d96732d9e8b55f604eb7a4_1598931696382_0.7910495383134215"},"_hasShrinkwrap":false},"0.0.0-705c9e720e11332cf73586dcf62f930c569cb212":{"name":"react-image","version":"0.0.0-705c9e720e11332cf73586dcf62f930c569cb212","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.5","@babel/core":"7.11.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.10","@types/react":"16.9.48","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.8","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"705c9e720e11332cf73586dcf62f930c569cb212","_id":"react-image@0.0.0-705c9e720e11332cf73586dcf62f930c569cb212","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-MfZ5PTW3ywy/joUPD1K8cy4PuiMOebcX5ciP+88TGkAw75RDIFBPChQUFFHzCCwlbNTmyD5yNBBsEry+tXkA1Q==","shasum":"79c9129d5a4c453ac0b28970f989e20df0057641","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-705c9e720e11332cf73586dcf62f930c569cb212.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTymkCRA9TVsSAnZWagAAsicP+wU56FdRG/Ozdipan9ym\nBHH98EK8IBWEHNI1+x3gVNHIkEJ/XTMr5kTtPTiIMj+nTtzw+vqipLht/H+a\ntCrps3CeuShZ0Cv9jJWly9XYom/6D0MqqY5KfP31DunFjIKztc9sI5OX1VE2\nqX9t8meL5dztiPrPA5hLz82pnf7ypN1eqfIw57TXHQfUEzi5C/wGbUgCuDlS\nK8Y8C8Js34gdh/MgLDUysJ4Z0bCO+3CEJAIW+QNYTRGLGO4gKlTRda/zC34d\noVNgZDLus3jvIH1vrW6JYDErt2mJifYIqOKwiApG1cGV38gBNHQZntTvKvjK\n99lYu5eLp+c4QpL5IpMuOjxFcYCIfYUsg5Kpm7RQ9SNB2P9l7mhynmh4C+2a\nCbIidCg72PmqhvvVaHhN6Cl/Xp2vDFRvGphvGCbpUGfrC/ClL8XxM5t3WqjT\naEuOM6lR/PUukiSPhNDwtFvbCtNmFAkHSyt701lkZbR3WWXFPLnKw0AifE/u\n8eUDJQRLIdau9uAsqTG/Xq7Lp/dpmQ9FWk2t7IfVu9oQSkvnnpOCuCiLucmQ\nTCCy4dax/tTFIRSIshrAvKFXIfWLLIwtAYZseWxBuqj1jr5GuDqENm3AWclT\neF+7bBm4fF1Plne/UXhVlWVqHoj/xorZ+fs0fNlWsoag21Jg1frK+i7lVIX+\n1G1k\r\n=8s8f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEijH6FSZmDVyIKaIVERUV6myNrejA+n/BCo4IZAQ6KAiEA8wGp9L8IG/d/QUGT5cQnhavAJF51RP9zeivbytpDGvM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-705c9e720e11332cf73586dcf62f930c569cb212_1599023523526_0.9341445427954631"},"_hasShrinkwrap":false},"0.0.0-42d8ed839cdf848abbedad31e5c916666eef395d":{"name":"react-image","version":"0.0.0-42d8ed839cdf848abbedad31e5c916666eef395d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.5","@babel/core":"7.11.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.12","@types/react":"16.9.48","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.8","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"42d8ed839cdf848abbedad31e5c916666eef395d","_id":"react-image@0.0.0-42d8ed839cdf848abbedad31e5c916666eef395d","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-JgZRuSz4Pnz+dAOoieSX7R6PhS/sWZpbx5cvw8oPzwXhZN7iFN77DgCRjUhJpuy+REzXEuo++KTuDRyWn1J0cQ==","shasum":"1f66c1c0ee2ccc43d7ebd7b7dba28d89dabb87bf","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-42d8ed839cdf848abbedad31e5c916666eef395d.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTzmWCRA9TVsSAnZWagAAtG4QAI5fWE41eUq5sUBn0/0D\nCzqRa4vbtQlIVPPWvx5ndVy1XT9iHxrhB9NLhb6UbOBqLbe5dXt9UhAKWWlW\niw2wQatuFSlb56gBVJewYYYPKQDLB/3k7yKd+qKXpp/02yseI15jogejG+ld\nuov/LfThA1jBFAATyrCfLqb1zItXik6JV5Cbt71DrlAKkDOvM7kHKIAev5xT\n+RhI9KuIpIICpmiIs6nwZ20hinkQCl2YjYcKoo552G5J9hxywRhVXZLU7046\nDCO9yROYMl6WMZzuNSdDPRYPzFt73Ea8X83OdaXYZQ3YA1NIXIXDDv5ps3Pt\nQsof+6ayK23VwVl2FrC/laETn2QUDBWS8h0gplTnaOOCAk5ejyIZljkzTjXd\n1RqbnhT7nglXdfpDfYMBWeZpjePYm82kl4vefDTpvRxVApZFi4ldZcdYKr5l\nRgo0HYlzHx67PgPI44QjNufto/1YLMrBXHM27+X8e+/4qbe3w254buAN99hv\nmnUNOnSE0QBO9szjxgfRInCSdKmm+n15URik7G+JUGP1ixJG0xxGnzlbmcN6\nq7lMS3gmA1tWpPgNDfLSjVVj8vfRhgdNKSPoEG8afIn8c67WWStYOBRLm4WK\nUUmoA0F0hlFR+0hiu4F4sIKzdWJqBULT7u0mh8vt9SSTegvwlMzNLyDzKW6a\nfojY\r\n=Kvsf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTfY65aY/ucUShlw6QwmhBS6PBRhWo3IwWmC+OlXZ/DAiEAlBfmCokyYdVNOk6FR7leVy+V1WdDaFNa8uum5XF+CqE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-42d8ed839cdf848abbedad31e5c916666eef395d_1599027605447_0.44296097475096374"},"_hasShrinkwrap":false},"0.0.0-b841dd34c7f0c426c0949fbe5cff6eef48b76a93":{"name":"react-image","version":"0.0.0-b841dd34c7f0c426c0949fbe5cff6eef48b76a93","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.5","@babel/core":"7.11.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.12","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.3","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.8","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b841dd34c7f0c426c0949fbe5cff6eef48b76a93","_id":"react-image@0.0.0-b841dd34c7f0c426c0949fbe5cff6eef48b76a93","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-qZz5hZHtnkIF/NPNXh1REs4XGiypQePDEveDRcAN6nIUyyt5qXJxNgvlci8t6QJ+Vui36PBe5OjJsk8T9bkBNA==","shasum":"28eb1f7ec7ad3e5d2b451f3a4fa000299dd6755e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b841dd34c7f0c426c0949fbe5cff6eef48b76a93.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT0mLCRA9TVsSAnZWagAApB8P/0d6R2cO50BdAHXVtjFS\nXd6JeiMgpb+hyXED0B41JLVjydX8iZsqCtDSswa9kGkuexKotw5DZWG880Pz\n1rhFYmvBlgLkKikkwxIS8INB9yCTuN7MjTy6fL0Pn8lEVQCJL5UnKznqiMZ1\npBkE8c32o/W++8oJbKiuDRsaupjtjlB6PlizJJaz/ZUACLrKPnIMbUJ6q4oq\nveu5D9OsGf12Yca/ocUWQ5bpqevFGtyB4jPRjjUWrrXhlZOMr6ZHl6UjsuPK\noU7I52xI2QCHJwMVzd2S4zCJ4XlbLQDcUufXqSta3kSwnPBHpy0l22TvIA+A\n0NB7WxKm3zUVSXReJv8zw2e9TYYv+4UXXvux/c//OV1y6y7fcheVxRUBAKz9\nvOxWG7XsgSd0fBDojGxFtbaY3CBZKZnPBp5cAIqUguZ4jTWSGc2ktRzs046q\nxESY20k++TkRmvZ+Qc1sqjPsHTrz/ooldrCqsXcfKVnPOaBdOD9l0O8yOsLs\noQDPdO1rMxPK4xwZ/uinMhqFXDB2LsnpqX5ktwJfPeZ0nzXrNSEoKNjhJe9r\nzLSDVul8swz18lEk8RYsClec4iYDG77puL8RMvrsQwqqCsaREK0/K/va6Q+7\nCt0STVaSkhXtm1M4U/LurNzI+sLSnPFcojw7g7Hz16tzvEf5Zi+IXU9hP3Dd\nWxSH\r\n=De5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZsiShOZ8ts86sX1VHxZpkDkAoLDS4vdX3rBjPZyIoGAiEAmOoer791fCCZuCSb5/7wJ+W8rEPhmisauBfe1abi97U="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b841dd34c7f0c426c0949fbe5cff6eef48b76a93_1599031690763_0.6428334991056814"},"_hasShrinkwrap":false},"0.0.0-c6f9f767f5e3e0b4565a6a2f27019ec596137203":{"name":"react-image","version":"0.0.0-c6f9f767f5e3e0b4565a6a2f27019ec596137203","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.5","@babel/core":"7.11.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.12","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.8","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c6f9f767f5e3e0b4565a6a2f27019ec596137203","_id":"react-image@0.0.0-c6f9f767f5e3e0b4565a6a2f27019ec596137203","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-7GZhELe5H4qJcrU0tJEarcVOqJh2y3v/8ABTPZRjWYJqd5X4XATXc4iLYiPzsypQfYu9onCtIUhZ8qcQu6ZTHg==","shasum":"518fa7daa37aec9a4c0d8c38f899d3338501d842","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c6f9f767f5e3e0b4565a6a2f27019ec596137203.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT17iCRA9TVsSAnZWagAAo+YP/R/bTzzx/iisGtMX5ITj\nvl5qWpw5l2GdI5sKl51iBiBmYXmp8oAeHMHISm3FleWsYkZbCeA6riveHmd/\nebTXeNKs3/S+u4xdNK5m1+2gCNUoS4+5JZrKQq4kqUSfheXnGMEga3HF9rpw\neNiYq25Zk/pftU9Vev9YtWDTSla23nVVCJk36LFLR8xxbllrRHW8+fFH/Rdc\nXyN2Pqj8ClWwzcz0WmoDLN2D+/6/jUXG2pTX2/WJlGxqF2sk250KuXO7OlrV\neCFWh7n8+XD6GNzwS57pXLEp1sZOEH+6hwh7Wj7P43r1rssiSF8ZggtIF9SN\nBdLUYu01VNZG9qY+nreBZQ4WHlRpTUf+MhfjhUqzxFYJVtZ2jV7eOjDpmHUi\nOUUcixvpc5VITDw34o9SS/+ioaFxBvzVSJtxLxlzWwhuGFXJpf890LHsncgC\nj35Q9fNOtVcqqJXcYIbIEhXHdQUyqWUortHYakGjGQHPlMRJbASrnyJnj7PQ\npfp4lOAPQNCTS2NTaCnbEH29tY1vRVsTjyT/X9iZ6w1rDfROmOafSsOQW3jE\n80Dzu+1fj6aLZDugDggvNBsox4wFBsSHL3+KzMLK7ruLwY4KcleM4T5koQQS\np9xpxAPdNue2x+SnvAQ+GA0UG/vA7NAFkCFF3Wgx+tcajUYuTEg+iQyD0Sw3\noAZ2\r\n=WvJt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdLAGIb3v4KyVujvj/F5LhavW6li1U9/J/DENBWwL4qAiEApY1MnkjpOE/rEm3qjiXm8YXi6NQSLFxs82yCzvjZGrM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c6f9f767f5e3e0b4565a6a2f27019ec596137203_1599037153826_0.3382017046058352"},"_hasShrinkwrap":false},"0.0.0-508760d1639f95a9b95ff68f24667f34d8805328":{"name":"react-image","version":"0.0.0-508760d1639f95a9b95ff68f24667f34d8805328","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.5","@babel/core":"7.11.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.12","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.9","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"508760d1639f95a9b95ff68f24667f34d8805328","_id":"react-image@0.0.0-508760d1639f95a9b95ff68f24667f34d8805328","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-MA+J2Gt3bpJcIebz4epqwkxFPGXQfkdHQtQF9US8mmkK/Sqg2SdH5FyWnv1VaJF+u+g8EUKdQMMx3RcoqaM6Tg==","shasum":"68a829c35571b44a68652d44b245db3c362baeca","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-508760d1639f95a9b95ff68f24667f34d8805328.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUS/JCRA9TVsSAnZWagAARngP/3sMMWis5hFCdzMqOgyZ\n+fUGEO43eWvaman1XDUNcs1jseXiR99AwgZUpRFP7rZG5GJRLRRZlgtiDyd2\nLcgsrmlHBYDrn3uu5H6FWdYJI1du0GKQe5+nw/6HZSOT1/wKQpitkmrabKh2\nj84QNkvfaGwEP+t0LGcPr6Nevs4BAH9XoV3EosSCDLQSU8Q2mSkg3iHlwdnD\nfdA+aOuSQI3l1+S48wPwosoZ2cua4iBL9OphHVbsbXn1O3yeSCwqSY4h43C/\nD4i0XdzVOyiM2iFeve1KdhWMXVdoZOUyFLFKoxchSde3tqL7NG1UdjgXeljI\nwaIviTur0bwDq+2DX38zhO8FjO6f9X8YXxyaWkTjWg+eDa4cM6sz3BdPtiTf\n7bhNIVRWEyMe6ARMrd09L3u+nY3SffqWO/TCKxq3qbcEb1yFzAFr8TBHPvXP\nbZ7CpfQ60aCdA4Uyb/28pdc/u6T76fx2TmQ4cG4ZcupwSFjLeU4bVMbbvibQ\n/eG+BdGMJFmVmyH6NTzWioAzpK9CBpNRWeAApszA8tGC7EkwssHWClOY0mem\nNgqPUIWdzX4aElrqu4LQ5BJaI6Ui+OoUYVHtNM6khE4MdSShOyZXWC7NzW4Q\n8pARXYYFo5rSysovK4+azVBd7PXaeRIRtyQs68xH25YwmrgPSP+xyzOmhn7f\nnFMW\r\n=VX2x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCr/Cff0TE6n6G4QgbwdFIWvwvNmKTSNuDRmXDQ6DnTGAIgdgICebk07r9XsC0xW1UEQmzqvbzRN9t4lDDyzw/p4W8="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-508760d1639f95a9b95ff68f24667f34d8805328_1599156169169_0.37243156246608655"},"_hasShrinkwrap":false},"0.0.0-875589586c741feeb29e8fc0f1c22f2ae053e833":{"name":"react-image","version":"0.0.0-875589586c741feeb29e8fc0f1c22f2ae053e833","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.5","@babel/core":"7.11.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.13","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.9","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"875589586c741feeb29e8fc0f1c22f2ae053e833","_id":"react-image@0.0.0-875589586c741feeb29e8fc0f1c22f2ae053e833","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-ih3ZeFmYJGs3RqQZHGlH9wurMe5OH8+iBv1cIW1NpWthnHpedfrX/bnuxwg57f23n/sfddzUG9h3NTyBwzgNpQ==","shasum":"ca55d89364487dc023cad07e578d2a0cbaca81ee","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-875589586c741feeb29e8fc0f1c22f2ae053e833.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUc+4CRA9TVsSAnZWagAAUZEQAIpk55ppfSRbgt5VUWv/\nATtO+jhWRM17WmAgC/hznHIAqhdlY6bwW/UF5wE37jqrlFc/IuylhpnRyhSI\nluiV95O8dCaPC5/MKHKU++MYjYHrIuIPAIlUSE+Kk05sGPtwZ4g7bUhUrOJ6\nCgB77Fk3tUA04higFNqj6oO4K29WZvVHjd6F9WKERVPvPT/+6FYwlsAOIF4a\nrpEKDOGcRHbmylkmmBnDq4Dgiqf528ywH3GOV26WluRg5boIdJ0LSKvqRfgm\nqI6aeiqO5IWbZ+boYYWwlEKijdoAU6ZjwvIKuh8QZwCggf8PGX2DaezSv4L3\n3Y8dyBIXvP5//j+EwR92J7pOX2nLstxpQJym6/r8Kp/bj4wvt4TflYl8auSq\nnsivIhhpLZahiZqZTD1E7S+R0GeQHUNIK6lb3ntqpg/ppSK+PA2/I0WCVTBD\nJsPBzpGTolFNsdgHJ9jAYWGvOFWzdecxoNMsLu+wrU5kB6gpMR3K190KTKOL\n81GLg5+T7gAvSHNLbgRl+GQvV+0XdUncLcD22OEseV9bi0N7PzxS9IJ8BlsB\n4NZ+QP9Z9xOZ/PIVNT9haBb/Uy0Jap1PyjsqIyE1wMDQ3mKvRzQALsXomJ77\neI8DEivxYA9pFx96K1NJRXGaGjIPjz9GfN9bWOfEvRZAzZGia52uZLuMwADp\nZ6hi\r\n=p4+P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHzcgZ0GKs83tvFnfbHTx+1c9GNjvgqL1Vz/M2AQdUtsCIQCu449yptjAkqXZitql/TFtk6zCOMqIuTuzvkmt1LAy3Q=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-875589586c741feeb29e8fc0f1c22f2ae053e833_1599197111716_0.15962332752069686"},"_hasShrinkwrap":false},"0.0.0-e6547cf5671ea18bb67203bc23d6080bfa037542":{"name":"react-image","version":"0.0.0-e6547cf5671ea18bb67203bc23d6080bfa037542","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.13","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.9","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e6547cf5671ea18bb67203bc23d6080bfa037542","_id":"react-image@0.0.0-e6547cf5671ea18bb67203bc23d6080bfa037542","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-k+sceMpia5MajY2EqR7OZXNh54ahZj1x0DCZy0dApRCCUWqEIRlqGErVFjq6/SXazz/TwiEaVsYCHWfEBb7NvQ==","shasum":"49f7f3e58c91247c863c7d2bad96dfbddc82cb63","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e6547cf5671ea18bb67203bc23d6080bfa037542.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfU0CUCRA9TVsSAnZWagAAKpcP/jxTByW1exTEbbC+x5T6\n1BJ0qZ7mEjUWwTOmeGRE/HhPZatDkmBunCu5h0aXmgYfIxK2XUeVZGmQYq/6\nUxlNUI0iShyoxJC08cs48O3G75H7a/T3OA9nTio0624jh1gtL0ou7DL48VDS\nhNPltZEYdyX18A3RzsUGot/STMLHVTPMyhybjOU0zIW4EJ7UshWMz2hWa1S4\nqtl8f2CfcwGu4iuBmgvuYtPDFK0li6TBCMeB7S5Z2FDvZjJJWiNxvTu+pdfH\n/YorMuib+L/03MXJ6nDLjCoCoXh+8+wfeemfXcfD+xgWxNMoJROz0RekIcNn\n+DlTlLWkJgZjZMNa6iW+yfsuHyp8zxQLvZB4YDbqPgPpSCv0ZW8tsxubtG5n\nNfvk9J1p8RnNIdZ0VpzT8JkwNF7EStYfiBz4ch8MlF/ESJL57B6aX76RtCLq\nG9rO2wdpNSx6LScuqoOkxQH3YQxP+tgpoGDdhhd28w7kdakqtNwZ6n+isx+Q\n73vWS8Myz7kY9tnTXDu4+4k2lV5t1uVJLifQHDI4Lpw+nbDljMlMlJx2NKMA\ntB9xnfpLJHlKPSYHLJWmCk0hD0AO+kYHz1f2u3B2zIupRyoSyUHrxdpuL3Le\nbfb09FAuqNKy1CUFuozr+FjI0vA/52KMXuPaueL+b4nhhsKCnaybqKF+F6zx\n3tEt\r\n=JiUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9PeIF9TdDbZ+5H+AKHGJ5NPZ2Mp2zAQxwtFKqXWkF0AIgCfyH3IXWcmwrGkcP/IBQLN9FeXkPouxwWVXdVaf0Py8="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e6547cf5671ea18bb67203bc23d6080bfa037542_1599291540304_0.7438864080337093"},"_hasShrinkwrap":false},"0.0.0-60a61e1455e1c2da7804644a2c7ebc2b482853df":{"name":"react-image","version":"0.0.0-60a61e1455e1c2da7804644a2c7ebc2b482853df","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"10.4.9","@types/jest":"26.0.13","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.10","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"60a61e1455e1c2da7804644a2c7ebc2b482853df","_id":"react-image@0.0.0-60a61e1455e1c2da7804644a2c7ebc2b482853df","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-XWss7uN9lmBiXN84vlLdFLEHQCxEGgx8Glu9YltmvCXNYu+PjqIVx8m7Tw7juQqJyJQLRpqZqAZkOnbqMMVs3A==","shasum":"98f7fcf19298c5e1d9bf35287506a0ec8d2f10f8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-60a61e1455e1c2da7804644a2c7ebc2b482853df.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfU02JCRA9TVsSAnZWagAAjokP/3V46qLqLOAhqxacjsdM\nReBsbNxxctl1FE9JFhr6Mv3Z1xPrDjlcyO7xp/vOA0K9y55anT7IquR+Wx5k\niZEjINy3e7WffkBHrt3tOr9n5Po54yk6e59o0cI8r5jYY7/X+6i8IzbCoS+W\njqpM8z2B8mizDn17/vZUcydWvYhqCJJzX5F9dBGrC2wBML+b6XG/T+YFLfAM\nOVx2FSLZst4lyPaVMWIXT+J69B5TZwGrDAOPmxwoxD0vmm3nHFLjbBZNAOl4\ndMaL353B7WLjzDyw72ydHGICvtTNN5h/NQ5Oj8UTd3g80zhOcrh4eV+RtsEI\nnaWkCZvPG/vuc1tO/0MEzUSk3MWIz0tng4aK8bUZfEtEkyanEPLIfLioGJlh\nDnhc/Zi+0khtzOjpb06h6ic4+cO5FSaHXRmUPhJUcWpxvfVPudtsQX/0FYWP\n3u1Eynouj38pArKaKVRAlK41U+NAzw/2AmFckmpvWmkn3A5Fi/pkb/bPqvNj\nvRl4J2LpRqqq5bcSeCHM0gE4xze8YSK9ObgPCrPHpNvvbChjUzLOP6CQiUyz\nnesZvUvgi8D9ZtKOdv244EoGPQ8UjQPsC/ZMJqt5BkOEzd4CyzvQqYO0DEqr\nkh5ZBoOe/lSWxigO7NBC/j0QYu/Whxu6pOvGGD6ASsHGkBWEjiVVPVOYSMck\nBiQd\r\n=nlUW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHb2aeE+AdiVMmy3aha2cW2nKuRYNa0Fh69TLuZ+J7Q5AiEA7JH6JmND+cvQcVf+tasv3DuduaasPXEUKddebfsnq5A="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-60a61e1455e1c2da7804644a2c7ebc2b482853df_1599294856963_0.11826590703145756"},"_hasShrinkwrap":false},"0.0.0-56516e36d95034c307a7fb9e44904a08393c758d":{"name":"react-image","version":"0.0.0-56516e36d95034c307a7fb9e44904a08393c758d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.2","@types/jest":"26.0.13","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.10","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"56516e36d95034c307a7fb9e44904a08393c758d","_id":"react-image@0.0.0-56516e36d95034c307a7fb9e44904a08393c758d","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-Jjz+RBvqadkTPkUMItR2EBYV5xc1GMIjddxav3FSsE9uFAkUPcUeRHnngKSqf1HVi7mHjoAUywKw7qy1B82ntg==","shasum":"8b816a0af13155a3c06de62ec1ccb7a205829939","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-56516e36d95034c307a7fb9e44904a08393c758d.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfU1wHCRA9TVsSAnZWagAAjm0QAIS6kBQyEBC4rRQ2j9EK\nUZe8P0FiK59ft+Zw0JcvsfOjAi4aMEiAqSCPq9TXe3FGoHgpBRPXztwvwCMN\npISHOnH/vsG44V/db4oQQ5I2LvI2vlBW0Uz0JVO3TT06qXPUillDCpchrori\nHntHSRnDEPSkvz3zabUekpYiE8kS823j0ge9Kqaf4bP7K005CdEzBiwFLRRU\nhMk6XK4Kr1cmfvbZ3MnhRkXnTaRvBYO7jhovx1b5vVZ6e4jTJV9q3ahpgglu\np2RuTrV4QY2vox8B8S78WQsMRHI+xrjbXHyl3jMqpWPH17uuk54VJJTREOYU\nrmAuZkdSSiX/pB1iWHcPbfjPxHltgjPPkCE0pM6L/l668i0omGuY+vybCtCt\nImi6viC05Yhx9lXtzREv0IJheuanP5BDvwhjxWS9E8jJS1OZlIv4ofVCl9fz\nwcqn5axkBUYiQXpum0lKmIP74xzK2WC96Uy/8bJARm3/dhTTJeCLn8youNeS\nA0jb9p6fx/tViIGfz7ebLb1zCROINeMVvxVpDHOKzTRCgJBynzBnjzuoo5e7\nA2XaoW43uY9Zrm1VUWTfBYNTLbg9h3U+9lOOrG71oBaW9Ymyrpdm9i4TbRvh\nXqf5skkAaiKrvnWg5xztvC7OUZ7j4C/kHohc/YasQXbThYi8MRc9dagddPyb\n7gOr\r\n=ewnV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEvKF+MbuT68CIoviKMMnZxscVzbZH1amV4dr6xqUCCAiEA0BebrZ++lV94uIMte4pF3KRJCsCxuL9ITJ4KZ7I8Hy8="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-56516e36d95034c307a7fb9e44904a08393c758d_1599298566561_0.4087507667235586"},"_hasShrinkwrap":false},"0.0.0-f872de2d487bb4f43b6c51559754e64a83e1f0b6":{"name":"react-image","version":"0.0.0-f872de2d487bb4f43b6c51559754e64a83e1f0b6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.2","@types/jest":"26.0.13","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.11","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f872de2d487bb4f43b6c51559754e64a83e1f0b6","_id":"react-image@0.0.0-f872de2d487bb4f43b6c51559754e64a83e1f0b6","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-QqChy/533RveGpPxfgZXr4X7S7+cHDK6uJ45B+F0prUrj9ygSLCHz5L3Bh/8WlauZ8+YWb5vmJbXClm5smEBeQ==","shasum":"f7511038a1719101918bf4b9248aef70075f6101","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f872de2d487bb4f43b6c51559754e64a83e1f0b6.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWIeMCRA9TVsSAnZWagAAWj4P/j1qYxu4tPEnbQ4egy1I\nwSWDRXNsQnXEwrvcKBnOWpd7bEvhU4qYjLZX5r3DkCIGlT1/egdqL0fjuVQl\n7gqqEr5Gb7JVvTjCViI9zkwdWXAPLnTq/qmhboZT4iy5v1vY8cjlIpMsBgtu\nq/xsGUZRQtyLVW9WVJcLHleoZyV5j9EGZjlIC3Erf+RNpeoXD64dVTXMxQWN\nWjyIJb599kLgKCyK8z9p/bjQW3XlZsx2DweE30PDNQdjC4fHVOZbeohD60E1\noLSqjKpjgNuSHgq8KwYbGG82HBPa7iXWsaYtwBcmEJszgiY/lk90N3CsnZpf\nFU9bhpYAIKf0UYXoi9DpXkXpE16XBZSJyAJaQp5vDKCrUx1gZNRT596y+0jS\n6tX/aPcdOQtu0qEprF6jtp6QPm1EMKMA9lpRNSuL/rbvJY8i93f5Ucz+HzDe\naZ9noa8vroqXraHEvgxF1aqmIaIWlwLMRTo7rNflHVchQH1LnLmm2YAd9Kdd\n+Y6iiZWv2teMkEVw3yx+PLlhQSH4DS3MC6lipUOXTRgZcB36ZFROrtTZouLQ\nbxlabWYvxVulp6VuiRuWwDC//VbXZpJ5PpRjDUJ1y+sIYj33TTBIDv5145/S\nFfhBj6g3gkMErDA3KrcV2XrTrJ0WlAhEidX4WYKia6POxxz6fs1hljFqUEb1\noSDP\r\n=xVaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICekKUVasD1/BP1lhjiDCLjO9TuzGOYlzraSwyd2vbGcAiBYbWAhc64No6i6/15d5OQi++WdnVGDn3ASdP7sMuX10A=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f872de2d487bb4f43b6c51559754e64a83e1f0b6_1599637387599_0.08882090198415793"},"_hasShrinkwrap":false},"0.0.0-0cc18cb0d4a2b8c9771e4e6143511653ab1ab734":{"name":"react-image","version":"0.0.0-0cc18cb0d4a2b8c9771e4e6143511653ab1ab734","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.13","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.1","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.11","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0cc18cb0d4a2b8c9771e4e6143511653ab1ab734","_id":"react-image@0.0.0-0cc18cb0d4a2b8c9771e4e6143511653ab1ab734","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-zultmFf3FgCjFs2J1oCKKws0ygswBI/2j9jdaRVJbTmv7r+td/J9kjGGZrDyoZKUBq7NOzuo6dHW6U/fYKsPuw==","shasum":"28e2345431c34908173b03d9d67cfb305760ebe7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0cc18cb0d4a2b8c9771e4e6143511653ab1ab734.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX+UGCRA9TVsSAnZWagAAqRMQAI0XWtih0FSoJc4oMsTE\n48mES9vZsXk5p/WI18xgtfSHbXGel3CT48sPMA2yaQlQcuHKoooc/bmrzY6a\nKd1weZkHizI/tqHuw3cy9ppUbYOtQzTu9yjrScrEnSuJdZ7/wzcP4BOs4veL\n/7dNeR6HR8e0oqirlXNvopGXiQD3Od2hvmx6BHpYTgjQHrH351R8TSQQLxVr\naBjbNT7mzf5XZl8juqLyDuAZySmKOJSGSGJT+zDte2fnXnsUipXVlTZ2PSRm\n2D5Ey4DDMwJJcbAbPC+Q7poKeJxLLM1kgHl19iE4lmwQsuKsD8QP39KwgMJS\nF68R4vii8mkJbht21vJHVjmGHzeuPUvz/IUxJKybwTH+TNWjOtUXLYwnT1Nd\nMy3bChop36g01pWT8Qbpdt2J3+Kb7iEE2qC4gZgD5vn30Bwn+2Hs+63c8RWu\nrgRShlgSuEQ0hLuIS6DMeViGnbBmYp+IjUOeTvdV8sgcVlsDoX+ip7CtG+hd\nQwNGUzULQiZVHoaryoDI8bh9zrRP5ZqPG6gW5d7DdRUwmshMpjDmhFc1MsqO\niXFc4q9fFzZ8B34JYOcnf0fagadvhEp1sNadswzKQftmjVQdNjEDY4BhmUz+\nmuJ1WgRp5l1Lhxp3j8bSmxfCImOYEKcdgkZs5gdfah3CkWafd6oxfmGvCH0n\nLldD\r\n=ETJI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUYXtJLM7xDe67LiGhX3/QA4OAgnxSWU1t6vVEwEdvuAIhAPzIu312TQV47cvL4AAb2L3kcZkQnzSjXEfuWrkUgXWx"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0cc18cb0d4a2b8c9771e4e6143511653ab1ab734_1600120069915_0.171935038379063"},"_hasShrinkwrap":false},"0.0.0-ae352fe43be9350ff101a513e39759d2fbc0cda8":{"name":"react-image","version":"0.0.0-ae352fe43be9350ff101a513e39759d2fbc0cda8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.13","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.11","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ae352fe43be9350ff101a513e39759d2fbc0cda8","_id":"react-image@0.0.0-ae352fe43be9350ff101a513e39759d2fbc0cda8","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ERHaCTu5NF+8HxvTiryrp41s2N/0FllgCrKrFpt0SPjiNG9zygJRSlw6YN71OgccK3sEtReVW1ENH9GqeQ+rrw==","shasum":"cce583a27d5b43910ec9a66305d8a954628b64da","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ae352fe43be9350ff101a513e39759d2fbc0cda8.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYsw5CRA9TVsSAnZWagAAE68P/RJWcjZVu/+npGytbptn\nwTdcdVSr1MUDeN6Zx5BEooen2AjXZ3LzVSOmzuWhWqM9Nrs2N9MFerDCUFQc\nEXTWujjbq0jAmM9p2boca8Oy0VeJbEkSt57OLW9xAUhyEhHqtU9a4D+/W6Sj\nIGUhgdFDYTplw3kK7tHYUrsgylRicdN7nqo3Hb5a0lul7GJ9RRU/FNcLf/Yg\nfQz1oY4K3YDGExIL80h4606z8dPQKNhI2x851+d0y/yypfIaTCow2ZbOvTx2\ng+fKJ/rmVhhULpK/qVKxgtsQH+sP6tVRfzSHVrNKluMTABrEmgxlRfYJ1DeA\nw+D29fgIhTnAMv9XYGQTN4IuNdG+/wCuVo1cT0Cyz2RStbNxMQq2XMbKKGoQ\nhlSvdXxy0OMNhI7uDOwFsi+Xx8/EuDy3DWOIOg6FgBE72D2ZFY3z0TvrPBBb\nhEw6jTY6IiWTgjmx37RY6VNdH+BfZ4qKd1OjFPcWVpmk/3ogjDrRbqOSDTDP\nh/b7u+IjoDnKRdA8AhOADl+h3KYRY+U5I8DVCW1tCOL1R7N5Czo5Fc4M0V2O\nOE+cDOVzyX/KSi6XHM8EmLt43bXfmuWiETzSdlWtNU5ZO48h2AL3t1kx+pa6\nHNigsDMpYoa02e4WTCwtpD06tWaCd9rQRd2fVuJnWKlgFh5LHUQwM70Xk+/z\nqlTL\r\n=t+5c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa2wKwPuADFW7GcSvPJjZWOYMjvDiZt5uNG2xVU+XrxgIgcQ4NBB7qLZMlJMYL9AxiSiSs9YkfkSog3i54yzRr0ps="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ae352fe43be9350ff101a513e39759d2fbc0cda8_1600310329173_0.26240641820123556"},"_hasShrinkwrap":false},"0.0.0-99d14ea2694d7c45739dea5687e1d4a6a184e165":{"name":"react-image","version":"0.0.0-99d14ea2694d7c45739dea5687e1d4a6a184e165","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.26.11","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"99d14ea2694d7c45739dea5687e1d4a6a184e165","_id":"react-image@0.0.0-99d14ea2694d7c45739dea5687e1d4a6a184e165","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-IVHwITDkmmg4NguaDtOEJ9PwCiBjur/MGwyyyaypF+d+Fpn2VnPPPbZ2UdUEznp/M6TjbomamdaPCfduSO2kTA==","shasum":"90e9aa4145d54f271807b85d2979ba308915aa21","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-99d14ea2694d7c45739dea5687e1d4a6a184e165.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZDP6CRA9TVsSAnZWagAAPl0P/RkBhl4uCSpDhMN/veLF\nK8jWll69UlHj1LhnCOFd5GJxFr98EtZ/O4lkkWyR/nV8VPLK2byEqwGSMW3A\nW+cT6dbm/m/B0IZVsGb/EFw13uEhKSeza0o1ziDOGU+/epBfshh1rIXgtfu8\n0zXvuIj3oglCw7P0UfHqmVF0GY0l3EZwKzVtrrhrxlgipi7XIqgZxNOYa9Hd\npfFXBuSRXah3j3kcS5F06Y340ztl8mUqN3e22Wcq/BHIhQ6XSaqXJxyfmUZ0\n4vK7iZajV4q3WsO2RoUWB5r+sVzbpwXd//X7qrtJ8Zzsyht8Q9ADPUmgqbBO\nosCmzsimUuu5H34hLJZc9PH9dxgyvkt17FW1jGFMUoNXWOtvgpx0qSonyg1j\nI3byBbZMgrqTSXsLTFSqQw24cY/sOg+H06XlqA6l/MDihpov+qIwjLsJx7oQ\ngyCgldKi6yn/1UFbGn5ktIGHhncMjZycjyaILrVa86dKVuZfgVxHELCwL6Y5\ng/BrfXOnQamIIkXY/J6Jsp0hoDnh5V1z+EE/YTBqBrDFfhlL0Ui90SQOioy+\n3C3z1sEwgUEvwM/puUJ1OkDJGE/qmdqee3yrJbxj17/3R0LNmpY2vP14dpC0\n8kqicNkS/3cHpIpQuW69KcUCBCSMlhZBFzTbpJ2hmUjSjcYnlGyr8ZZ8OEa5\niDsP\r\n=ZWFM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNlSuIZSgIREWDCfGcOzYFHcXkJ+JT1RKbGujiiOyCGgIgXgYusop54P4v3Ks1WJR19aQBI7w3H5GWQ/5QugYNeuk="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-99d14ea2694d7c45739dea5687e1d4a6a184e165_1600402426120_0.41170890714640196"},"_hasShrinkwrap":false},"0.0.0-a70c0f55e239a032ffb027f79730c8df8727788c":{"name":"react-image","version":"0.0.0-a70c0f55e239a032ffb027f79730c8df8727788c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.27.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.1","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a70c0f55e239a032ffb027f79730c8df8727788c","_id":"react-image@0.0.0-a70c0f55e239a032ffb027f79730c8df8727788c","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-UU3xSTGDbLcKTmVi5kThpGzSIVBskV5aKasDZ/aIkm2XzoVyPoUhB7KOZE9HyW97fAZsVwkmv6gdF5rzxHuTUw==","shasum":"fab6651b87bc917e60ed575c2646d7cb0fbe43bb","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a70c0f55e239a032ffb027f79730c8df8727788c.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZaLyCRA9TVsSAnZWagAAGHUP/0Gq+THrxoq4OHCqq0SF\nH+N+4UPaSZsSFEX3fYDmQGcnkCD11UH/u3TNlMUrX6p5nKA0LKoXCNi96Qr1\nKbQ9yPWItWwcYL/Div6q7TpwG4RRaM0Tg0fOqaiIp3tigWB36qvKHjad+KLv\nURYn+XV61o2g84TMO74R4YqlqN6bZZ2Tr7oXNWKX7HKEkxOF4WZ8IjJlOv3g\nFIvnpSn0Zvsxh89Li9sYVLkucnU0vhW0dZO3hNi821X/8N7x7Red6c6b7biT\nUdkaxztaKyKBKTuUVUH82ow/aKIM3sSpLP0IZ4YaVej4ZtKg0p++3d2thM7d\n2YVK9hzc4JO0HKXsXLHWa7/klmbyxGoYAtBXAowoZEj9wa76pvTxxOsqXQ7d\n+ItatCKB1Kv0SQuiIv7ZmrzsMdD9FjSL8URxTJJ22RYR0x+IuArx+Huui2Jd\n8LIkYki5I9kOZwUGgA02j00SilHL2geqwEwoNaTvPljZxb1lACN3napqhlv7\n5MSIo66l2NvVZxp0/d+HeVU1ihPKMB6GWiY+ACzKuresxZao5ZlNtkwC+U7c\nDmmay6g1kfJ14Ac/pi0NeRU2y0+mETA6frEKtORsW+snqX45TnvUXbsdiNYA\ndS3R6ka3uBJUi2r5+5jEQ+1CueqfpsZbJP2JxwjnoGSjcD9dGHzOVLempn9K\n66QT\r\n=ac9Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKak9uIYh8gOT4uC+JRan+rp38y8yyPwz+MTfSClFB0AIhAJORXX1zFZRMy4dMkU/MAOimtBIOu/gUuBfz+jcdQGxY"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a70c0f55e239a032ffb027f79730c8df8727788c_1600496369630_0.42775550554957764"},"_hasShrinkwrap":false},"0.0.0-77980f1f23dedc6978084fcb272a9223093e98d7":{"name":"react-image","version":"0.0.0-77980f1f23dedc6978084fcb272a9223093e98d7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.27.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.3","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"77980f1f23dedc6978084fcb272a9223093e98d7","_id":"react-image@0.0.0-77980f1f23dedc6978084fcb272a9223093e98d7","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-CFrbXlwmsoe5KRuR0sWEO/8b/HR1HTSSX1P8e2lGdXiGw5kpfO+cvgFvPHNs2LntQ9/rrmc+1ly0JDlxwl5v9g==","shasum":"9e9a00f1ebee8413957c4ac80841b788a0312e3a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-77980f1f23dedc6978084fcb272a9223093e98d7.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZajhCRA9TVsSAnZWagAAVfMP/R/LhiRIynOS6MW7W5nV\nxx3bFFN767BYa/XTieI8jig+XtNI4Yj4lPVpaYPhK9bnodowol+6t0yzgXZV\n/KJvq2VTm+NygujftX9PSwFwinWX3vaq360/YeVuvIrkyCcMsLSQby9TwVMT\n7kHRpn6gt58O5gFmnZw6TsOLxfRbPuHSCjvbRDNtHm5N5DNh3BplZJSh+1eJ\nO8wgFhxUqIep1KSB9LbEpeudhPMXTPnGYmFxAyQ20/l7dQRZNzEC/8o/sFU2\ntPZSaE3MLYDv6DRZvDipdZ3+6/tWjP45+UBEX1ZZ6Wv7MWhbQJ/2XWm2ufRW\nIG1Bl3hrDq5HOsMbG/TiGJVb2SugS782q5rWi6LAcQyWPhwI1tQ9R8RQlUWZ\nGj/3FPpIeW0zwaqwlViSCcPb/rSFZOGwaNqVbC+Aah/Er1TL1vdeDYgaGGmW\nfQqqUf488JugQixQhqfHjFJbC9UmyEf1d9ij4KUlIf0ZrOzwIfNfsZEl13Xn\ng3lnr52KGzIR76Dg+T8UkBRJwtSuKVF+yxa/pf3AKpb01VmJiRciPXNc0hVC\nahOkE7woqIN4VjRg3/82acnbZ9Hw0pAnT8wy/jCXcW9lPvk9ybJ/sWsO14qZ\nb7XGLAJ/62Tabj1L7eF/pQU90VEqxTDtbn4S1ddEky4/idMg5xNjwvC0X9h9\nPRQQ\r\n=T7bA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQWCyPvofI9/J4ThpjHtY+g9OQKmDX0WiGIZylDxKHVAiEAyxXZX732Rh78FO5Btq1ojKlmVsJ13WKn2vnnHIpuWuY="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-77980f1f23dedc6978084fcb272a9223093e98d7_1600497888861_0.29752922113369595"},"_hasShrinkwrap":false},"0.0.0-060cec439db25e38e33baeae8e3259f1ee13e7a3":{"name":"react-image","version":"0.0.0-060cec439db25e38e33baeae8e3259f1ee13e7a3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.27.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.4","typescript":"4.0.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"060cec439db25e38e33baeae8e3259f1ee13e7a3","_id":"react-image@0.0.0-060cec439db25e38e33baeae8e3259f1ee13e7a3","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-7UJ+Y0LGdl9wNjR7USGK/7VJC8KHn3OM8h/rDYZLbZvbeXpEp60MyWsmymreRScG8Dq2hq3WPJ6WbFkQKpmU3w==","shasum":"36b18a749959e82097beff4c577272da8c3fc126","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-060cec439db25e38e33baeae8e3259f1ee13e7a3.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZxh1CRA9TVsSAnZWagAAs8YP/Aq7SDWQrLsmCUUzHjjo\nQDlmdZx5Ls4fGQ/1TA4LXaPRW7YgkHXk+ViCMnwYexVdVrT6TYByhR+Fz1Wa\nCINKSz1J8gCsOVUJE2VOihRfF3ESWXpH3YUGDIJKjC/4Oqb2nxeysAruKZRT\nBDz3ShVkt3MQ7oRVsAixM9/PyvICFYlIyD8+kPvnt1IWf1ZKFNCj7mx6+WzF\n5qAwSdWHxOW36bDwJeDxiwWwLNL7702tyxuCHffR6Njp1eDjUE6MQ+cWAI1e\njL4kB/JS+S7ZBzBWMDXV5YNTneib0JmFFwb65abDIqRf5ij0uPqhcfPaN0Px\nzyZ2QRda89xubHsWB8S9NXkEt3Z/LHJet7CwADAjU4Rj9BWOsmi98ZL0vCYh\nJzEl3uJTvM23VU9uivYM1xhY/eLTweDAEGECiUqUOwkMQU++ADPJ6Ethfznz\n64HKLNjze4oi2KEzKt3Rz24R1TfvCeV7txGwQZ9fr3Uz3r6QJADgVZLuc3Hr\nOoCFzcjJgDSAJ9N01iHvQ5KrMzgdxaiw/6o91E7CY+ytK6Ed1BTyZr1xEYbA\nHeZsCZAZ7LBrnx/IQyNVhLqxVtt8N4cQ99WM+TUugU5XpQ6Ll3Jlu7IcvyyQ\nDPYkxuw63N/RF9kXnbTxs5IdtGbFgtbn64zDnkWD9ZXL6xyfzTadcke3+OVi\n27qp\r\n=u1Jg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhFPvGsI/9pHxdxJccsQktc4ZUxrzcbPhDP7IOz2otLAiEAnnK0RO/AeLUHBuvKkEvapLy43K2xCzcyEUflxF6KRRY="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-060cec439db25e38e33baeae8e3259f1ee13e7a3_1600591989397_0.7103495569149298"},"_hasShrinkwrap":false},"0.0.0-d3e07365892a305b1f3b61d4c7185f634b011986":{"name":"react-image","version":"0.0.0-d3e07365892a305b1f3b61d4c7185f634b011986","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.27.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.3.0","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d3e07365892a305b1f3b61d4c7185f634b011986","_id":"react-image@0.0.0-d3e07365892a305b1f3b61d4c7185f634b011986","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-a+0S1IZp+CbdSOnGAxVwv4is7/sQ/3xiXFaQEteOUuUDq6GE2Up1zlsIfhxdtVHhuXo6jhQLtKDbpl/jmrAMDA==","shasum":"c63c5310b4829c876b95d31d734e783d68f27753","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d3e07365892a305b1f3b61d4c7185f634b011986.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZyEzCRA9TVsSAnZWagAA0hcP/2OJIGwa/G4pUKEyJnnS\nfU8XFqjrEcDUABV7kmZqmZcAJlH7lVhqrOGRVKbY66ARw/gaNnY1RpXJCvU9\njBruTAOMkUTqRnenAjNDkAXEarfHLErRfPN5bfDluNhCMoB/VWM0XwHVa+Vo\nA+LJ7Us93hah+TDGBe8Vjl3SdQOAh/mI8oUeeBqioPDXsSOirmriM+Ws/4pl\njtLc4WbLeZF1y8mOJDedjSGFiivl6ANyMq6GiygSZ8ce4ovkTvHvwZ1/qwep\nwW6dfwLun5BxxcpZPnRAVK9KlH0bCj7DWZDwi44YVxgmoTIyBBrkJkmclsL3\n1VMYXeJvUt6Z3t615VaGnSu2lvXFzRdbkMMV+JcP8rfJYRPQHPQE9y0LOFls\nCYpGhaKmqgxOPhN6rNOm5RB7o0pCu7UIh3Z+XP4HbDhKFGGsktB/Bf+JbkvX\nWoOp1aH6I/TyHtV4BZaM4W4RsFiGq50ODx1xMzH/oSmZT5+BL+bF9gvvcQib\na2B0+M0g5WGVBh3PySIP0MSH/1E44CZCyWe29/TSqWpbUw8raBLaWTlyjltx\nhdmneg9vNZC9SFkNp6sWZpYqj2POKVEimsg8i7d9G6XxwIGjghxwKtNKhEiJ\nhWwQBI30lRpTDQ2G7C9UlZJuDUinYAzxFSucLZbU3F/6eHS7eGTMKouxpmKB\n01HO\r\n=7y0C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJ4q7CTn9w8VtqTfQgO++0XuP4RtTG+F24j8qGmK9RJAiBrdr1PnGmHQpJbg0BPFfUNnNgmvl2N9pkRJPtxNxfz4Q=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d3e07365892a305b1f3b61d4c7185f634b011986_1600594226643_0.7662783251811973"},"_hasShrinkwrap":false},"0.0.0-585d62b5227439ba90f4665913e6fd8b03758c34":{"name":"react-image","version":"0.0.0-585d62b5227439ba90f4665913e6fd8b03758c34","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.27.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.0","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"585d62b5227439ba90f4665913e6fd8b03758c34","_id":"react-image@0.0.0-585d62b5227439ba90f4665913e6fd8b03758c34","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-RvpEABXcdj66rFVcu/eUaR0ov4RnXuhC5QfuigSVRAPauVzth8xECBkB1SsxM2ky95rk7qgixGx2lcZefq1D7g==","shasum":"97a5665a1d21a9f2445307c6af9f8724b53dd960","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-585d62b5227439ba90f4665913e6fd8b03758c34.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaJg9CRA9TVsSAnZWagAA78sP/RMro9heCIgrZCE01Dpd\nPyGU3z+lzbt6VyPNgDjBHk9D2mguMFEy6v2ZGSJUZcNyDzYnfKyi+LJRtS0N\n+waSUkT6b5pKL33AjZaZJB9oRABd9D49+0d6zQRHFVOJuRwLGWGPcRiH7BQx\nhReCE8ZTiRhuzUCxyvTYOJCVFvL48tntwiXSdnePxDdq7MEKxYIAamURIGKf\nwcP6Eih9kYf1DOJ3tdBD9HbRvu4Zsn9mFG2YDG3PL8Ktb06k6b3nRW1bVdlo\n8GnKImxl1Pu0u0GvhGYpllV/rwwvNdIBU/wTEKhu+hT/h5xz6vXVZKm+QZeU\nV4I3LOAQ/xbgbxJ2QMtyKOwZcG8fNBE8hg8Hv+BMwdSp03wh9M/+Y7UfB9yr\nDQ9aS3ugeuvomxAhw/tTkvMLEABLmSfTdYx27wRgCBnd4Xw0RXp86piThJrE\nqny89+F9O1+6H7OXBFHs12TViRFaYcS6+24g3bhkwtsB0jiE2rCqp9TaJgUQ\npRj0jt6npCEIvf9s9b9Na6180KBcPREj3dCXKvBYAYsLK5JEelalGpuBSQJr\nX1gcIec6H3uXsSng3/lkhD4b6nYI3c9XZwZRvHeaAyyFgqtpnPe6mEqQpe+a\nlTuFHg5XbiJiM6sn2zpLZfNIP7UGQIva9BwZFE839idsoYaV1wAFCLPkw2G7\nIJJR\r\n=ZmQ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLt6wONFBNL0SPUKJgfnpP3ORyoIGx1p9yfQY3i+GpjAiEA2JqD/PvWH9X9XW3cGxeDFJnUwrkjiiYCnl5JzIdpKyU="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-585d62b5227439ba90f4665913e6fd8b03758c34_1600690236805_0.24383689069964642"},"_hasShrinkwrap":false},"0.0.0-18fea45c9532bc8fad450601046805ad8b2a251e":{"name":"react-image","version":"0.0.0-18fea45c9532bc8fad450601046805ad8b2a251e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.4.1","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.0","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"18fea45c9532bc8fad450601046805ad8b2a251e","_id":"react-image@0.0.0-18fea45c9532bc8fad450601046805ad8b2a251e","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-MgA446QBkiRgYx2gQJmBmZ1QTK6rUYCuvIvhDErlz3wSQGvBVnuefUCwnSjyQ8VxB7gf+PGG1vujNoN6odC3nQ==","shasum":"3d328364e54b06e8070b5cde9242810db134ed30","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-18fea45c9532bc8fad450601046805ad8b2a251e.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfafv5CRA9TVsSAnZWagAA0gsQAIl7N/lFYLz+3rI5emeu\nQvzCLcke/Gi6r262qhl9/Sjyl81u8lUCUAD/G1hX17kW+/I/tMvp75MEhyTp\nlSnXMF0HoTu97biMzvkbatIp4j1qqidCslMqfxGsPnX6aPUhYljwPXLyOJYs\nZ8jV2y4SF+XUk6mQzp/28z9+jDl4927RmKJ4v/0ZlCxLdt8xZci0+wf5HZir\n6xVFdnfXSwCTZyRf2PdQAhfkEK7Ui4n36hHnFgYGE7d/oaO8v4nDYAwYqJNm\nY1VRlUwSyYy0Voc/dBD7Z1G2uqycoVNHQMuIY8A86auxmTfUvP7ems0XUVY4\nym4rAD23sbRQgMSZjafcpkCl5ptgDSZWgy3R35xndFF4J7xUSyV46kgybvQG\n6mBa+Wo7MI/HeSo+3FKd4C2lelk8Y6VoRdHYgM1ZyNVJlDI4spG+fpyE4Dsw\nmZqFSID8k9+OaaSLHkFAmA5l75bZsAWT2O/ue5jxCStWtWUT0uDnD9DVSOUH\n1KqCQO0ppHY7qJtEeDZxmfh4BEK0KUX0qFgJYcegTicYxU+KTVNSfBpzDNuD\nctbwgacXRErBitQuzRPIrgq9vd2nFNINW92xPIjjH8AZfqbwehV1BClz8ea+\nDvrkO9NKTBVEZlx91yBgsi6G71wWAkNZrDRfNQAYg7km4vT4hY/x4iCgB2Lt\nWz9c\r\n=TOlg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQUfrFIRggYT3T9w39cO1BQIytnF7iJ6HkkHGILQJamwIhAN6pexUb9XGRQjm8Kd4vpIucuEcGrZyDJ/XLEGpGId7B"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-18fea45c9532bc8fad450601046805ad8b2a251e_1600781305322_0.9269654101672686"},"_hasShrinkwrap":false},"0.0.0-5b0d0055ec2fc6f6a498420c96ffc31ff0634e70":{"name":"react-image","version":"0.0.0-5b0d0055ec2fc6f6a498420c96ffc31ff0634e70","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.4","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.0","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5b0d0055ec2fc6f6a498420c96ffc31ff0634e70","_id":"react-image@0.0.0-5b0d0055ec2fc6f6a498420c96ffc31ff0634e70","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Y8kU2IJ/7GdV74rORb4omRk3cKiehYt3LzDMeVo+kD/q9DoLxYA5bHVxaReU3L3MJLm0TiJno4e//Znoi7QCdw==","shasum":"640b3949342d008bbf98af4503fb353c2fa32d13","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5b0d0055ec2fc6f6a498420c96ffc31ff0634e70.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa2ZlCRA9TVsSAnZWagAAiO8P/2MwqvclaAgddIlNL823\n/5XUNEEuDUMhhN8jcXmmxMgNZrFO1k1GuyKBVRpa/Or9ERjsZ6vqRk88dBGo\nGGG+/hYrbHRPw7PcBmyJCtOYwSOI+A8V2tbEa7Z8VFUdWm7LDAbwXI4bev/w\nYfVI9NYIC1pCGBu5cmld2F+ARAJnBnWD/KQ5MaGZqY876UAs+uj+L9ibltJp\noU9yqtA0zWOrUtSvb0KFPupZi1HqbGwovlCqVxaoaH5hXMFZNusYItNZtgg6\nXM/m8uLBMlnyvonNPOZg5eBP36R+zmvuxZeWVeK1LrEm61Tmm6UM9qVwlESG\nsUCP3QmWoWAc29m5EzgpQD6iMG9ZZBICzJbMF85UQ8JrvQyW4z8cRlVBqOQ2\nLvQ26B1rVX9ymhKkQ+92waaJWxua+N7nb6TYBahVzWnM4UsVp+fk3ff4uTwc\nOHwqTHnRhpFbkWbJ/tupj5RNvFO/z12USakrN+LLxLKom6MjMJEdszFRbOIS\np39TCqa3Gj+iH0Re4c7fGiImjpee04DQe/iI0ltlaK5JX5gQvk37uMMcHOZs\nJuoftZQ5WOAvjrPoJeIIGO1wSPwADdDmFqvZJqy9cy/H4M37Ac7UDO5ZDTf2\nbmpV6P/lUkuFFXbkQIeYC0RB27NzYT88c56CKh2IGIx54y+HHUiypsd1EKWv\nJWR2\r\n=6moI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBHDa9Lfo32p4HtMQcStPAf27NoQRhsa4u2gal/tLcXxAiEAqhYZVXmh5TnKEhE3JsObznRNAMtnTeYdXUJmRF7jxCQ="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5b0d0055ec2fc6f6a498420c96ffc31ff0634e70_1600874084743_0.8750238714778524"},"_hasShrinkwrap":false},"0.0.0-995fc0196530dc41480f619918fc40b5cb72d61d":{"name":"react-image","version":"0.0.0-995fc0196530dc41480f619918fc40b5cb72d61d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.0","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"995fc0196530dc41480f619918fc40b5cb72d61d","_id":"react-image@0.0.0-995fc0196530dc41480f619918fc40b5cb72d61d","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-At8YsSASO6Rsp86I9UlQ2M/OQa73UHVQZ1S4WuVC6xBntZc0p9bcnmUi8ZxpOOnH62iRFcIQH8eirmFiG5l0IQ==","shasum":"abdab885d87fd7482b42e113cb6b817285fad862","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-995fc0196530dc41480f619918fc40b5cb72d61d.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbWEkCRA9TVsSAnZWagAAT8oQAJyj3xf4IHkv7rFaybHM\nKfdra88Pk6/G0woeSHbdtpoSU61g7Omkqus2/u1IM8u55jtTkIvxo7xR19vr\n1ZQ6XPcqzCgZXqT0L8qx4nXXdBdORKodWWzJf2wxrfI6J4V4xMfU3oyXRUqE\nxhZnf6xOInRFfcCwEnaolNVzjDWjDFxttF80PI+A6FZKk9E1ovW3jnCD6vpg\nwt5lQNmFfamdKZswa7uex2RvgKzvYYUZVvxYEjLIXzYFnsw3aIbRgMfU4jIg\nR94oeXI0Fj0xDnslRAxgfUHVgr3fOrOBBoaOwOFEBGoYqjIWxdoSPZEymsHH\nmjNx+NUxHbiM2qUnaeLC+nVuRlS3gh2b/aoNiMAoM8sfolQYYbwx974kN38l\nOf38rixUDlyHqre0l/xuqdO2iZYhQOlPcyNcOUnAMWsQDtpwERCDYhaQNXTE\nFI9/1a5Gj1VNBG+kHegIyRAUyW0r8taXyx4eeBbIf2Xvo5ZgRiclpsvgArwu\nV2BUt842ZfySzVRqX7S6HOCCsTaOwUXq73dcs17TW5HiRFuPzvXVoXq4YAmu\n7ece3VNB89rhvneOmlmsb3Eool7GmShy3hH9OWmW5YQpVv1/3yeN5P3jvniH\ncD8ENg42R5hnj35YosD4DWgHD6IMQUeQ2nGPsjuOXgyzZ7j/dCl5b1avgXmN\nEX29\r\n=EMhu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsUyLsx4oPVNnRijnLeHQ3fW9FlCeY7MwlVEOwTrPZ8AiBlFH6TXEMdwtOGXDccyOFAjclSlSU2EEflEQ5D4czSAw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-995fc0196530dc41480f619918fc40b5cb72d61d_1601003811547_0.7443457979957955"},"_hasShrinkwrap":false},"0.0.0-3d455d3ab0d0980cd15e63fd94c8ffce79f1e6d3":{"name":"react-image","version":"0.0.0-3d455d3ab0d0980cd15e63fd94c8ffce79f1e6d3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.0","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3d455d3ab0d0980cd15e63fd94c8ffce79f1e6d3","_id":"react-image@0.0.0-3d455d3ab0d0980cd15e63fd94c8ffce79f1e6d3","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-IsNrxfTtc4q8GDaa/9OYNF99XzF8iLL3n7S8o1XCq6AOYsqzpygOgoii6yhsGP9sNTTxXC+Sz6/Xcvic3U7M0g==","shasum":"2a7637f9d27249ab82f345bcf787e6f8b0150adc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3d455d3ab0d0980cd15e63fd94c8ffce79f1e6d3.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbtbDCRA9TVsSAnZWagAA82wP/297mR6F6XIY+3RY+HLT\ndeDEQoOWxhxMQ5l3pztfZ4ksfZ6W/IRwM0i0XR0gqwm2pstXDhFJHkNGkrAR\nLAUVxQ5vlgOM17LYxOWpfpNhZDhKmzdTL7Z6HCAjw3kdfMclekv87Q++0nIu\nw7fuRppSjU0bBPm+UmuS/Z2JYfRUnu5MRYDxI3xdAMO7pkmcXk8jT4P1Es7V\nBYXTjs7x3RDoQ0vDsrItwX902VPGvsTZ9r7J5iLsTOOTxoTM8LGMbaD3UlK0\nGGXwJ4eTa0DBcV5KTEi9vzhYP0MBjK81/dLSIJZHfMJuX09/a7wn5MTZJG9u\nrxDL2zEDDwQjxuzMYec1kTQic+7E1LZyU7nE4ofMkPubZsVBJiDcO1Xa1NEC\nKlLmW+rnBLxnEB6sLBmhcjiMNaZeDRorqqtn1/dwLJBJgmHgPEHug3CLAaFb\n0OumjtVUzsVElsWlAT1beV6ffj/LGuE+0lvm6XNT1FAsYByOVsdl6KOAqWOp\nDLNBg5SNfc0gznLGqAqpPj2C91oH8TR2FsVi6P8DxOaS0EaWRkrT3e3h0e+C\nXLVedZ8ERJQw6G1bx6VtRVHvrY/PJsO4HG1qCbzA8OASP1EiTeHtMzguKpTw\nCWCXzHTiDjYxb+vl8qM+8wArx1Yka4cz2kPMHfcfjZD6azCN6xwb1CvkoCjv\nh9xf\r\n=VCq7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkz0cmhKIIlGKm82m5OjGUFAljMxW6wtta4ncrmghkRQIgH6aKPeiBgmH1NQYg00M4NwbaPvFoSRWR3PwoZHBjnD4="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3d455d3ab0d0980cd15e63fd94c8ffce79f1e6d3_1601099459015_0.7492600792144588"},"_hasShrinkwrap":false},"0.0.0-d099315d3e2a0a1137e91a2b0daae1ae23468ecc":{"name":"react-image","version":"0.0.0-d099315d3e2a0a1137e91a2b0daae1ae23468ecc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.49","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d099315d3e2a0a1137e91a2b0daae1ae23468ecc","_id":"react-image@0.0.0-d099315d3e2a0a1137e91a2b0daae1ae23468ecc","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-m5nEuDp0EH+y5huf5nr7MCO/DBnEuiG925UTNVNiXVb1q9bjgbvCm9G/g4Igqv4/+TYwkqKBd4Ev4F8sYeYY3Q==","shasum":"174ae3e3ab004e581c3682a26f18cfa678413d3d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d099315d3e2a0a1137e91a2b0daae1ae23468ecc.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdJP0CRA9TVsSAnZWagAA8RQP/jrjaPWX7DfbuZWthz5X\ne89AVwW8sYsy2DQoZcm1mHxPIUyyKePbodvAw6CItaDDHXWwRBvxiYgmFR9F\nM46DJpC/V/C01oa+fyHRXs9vO6ARfYBBVuVLRtmBkekMVWiuknDHJfikZVY7\n/Xyry2cZzUcS0l+PwRr24VxdEap0TlAiZQC570efMy1gQ0GfUwPYtRwlKtSx\nW3HvYzgSZn2aW9zT4gsvDl9Ng00yo/vQXDgUMsoebm4fgEK1JFVk3l+1KUFZ\nAP5K0szTBZwQPceqdZsUrrizrXp3t5L6GY6niTSpIaWYK2d83bXAafexTn1s\nrv2vsZ0G1ua6rgdgtj4+jmWlFH3PQHm3+iyryAapSSJ8aXVWN97TQmiaRAaH\nm03FvYYCcSEhecrCIW47h48bZs8oBXg+430hsDcpww6zLLL8Pky2DJn9bYxy\n2PLOv/GbocX5JEie+MtO+p9I1js7Th6IBZ7BrBvknNW3eb7n+/lGgWRNJZL5\nZopd6BPXK0atdpeQFSP/B4ATRMBJMdy6JKnB6MbrkmLpreA9BhzyYqKhK/Vz\nxPd8vekJ1eHI2cgDci/9JKYEYL31URyanKQC7TV0cj3ctCUTaOlwnrEYTpMa\nebuxbofg1KndlARONDGj4FS/U1846TUk6/S/DX9SX9gqFKSJKWnR7mmur2dc\nauNx\r\n=X7E6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFY3GW39OtByy5/vSJmBtJMwR0Y/SydN2WtfesInRnfqAiBJnQ7sG0T+WTzHKxeGEU8q3x8IsLifuQkJbi0D2WNMTw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d099315d3e2a0a1137e91a2b0daae1ae23468ecc_1601475571183_0.7610114388712377"},"_hasShrinkwrap":false},"0.0.0-9709302d0ff36ba04d6be38bf5716001474c29f3":{"name":"react-image","version":"0.0.0-9709302d0ff36ba04d6be38bf5716001474c29f3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.50","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9709302d0ff36ba04d6be38bf5716001474c29f3","_id":"react-image@0.0.0-9709302d0ff36ba04d6be38bf5716001474c29f3","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-uEYiP/62XNoN8+N/wZ/1GzA6WUUJmC6niNKwWkl3Ez/+UTvH+KIz7bI550d7ZmsFm/+27Yq7DwYjpYYL4iaX6g==","shasum":"0e223891613b26b48da2fa175b2a048137c2b81b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9709302d0ff36ba04d6be38bf5716001474c29f3.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd77BCRA9TVsSAnZWagAASj8P/jtlmEYflLw9csqnRHDS\nkVANpcjwbPbOaOlWNYljnK1GlsFqPVZqrep/dLZ/3U+TM7uNvnauaqzlum1Z\nIvort+4JsXeXJpdmiU6XU0/jwMmkEiXSuzA+qHfn5JdC8JeW5EO5E3PFUYDv\nn/zXPL/PiEFpkhgBt8cqirs2K8C8zRZL/PuqYDpjH4zONbHiqoM+y+o884m4\n2yxnPqvawVC/YOc3/GQXmhzOB0A4w4hI+yGc4j3oBs2Mr7KAnwdcCGAFmWCK\nLgW8iouX89k2paAbEg5bB5RuWPtqG7AN4sSeL8izoaxftYjCO1vl/D/rk77Y\nkWwDRPJ5/iPsRF1m7waJUnrFH0Ysx3UDM+uLsL8N6NtOnyxieu4j8JZnpqKn\nUFRf47yWZyFCcJGMxHxt4AsMlFjSdznAJOoK3KIb9HL8Ha/6f+/MqfgRQuN1\nh/61uN2s4sJHivf01TYQjDu7+Il3R7tpH5rrA7FvfPfx2ONSDQhAQTBAWHhM\nOhIyD5tolTyj7rXgP0gTH/HbIuZNHiOFg4vdTixltV+WF7QJsHHOubD6W9mO\n656haS/XhJc8CkmIHfHCPmzihQl75tXFepSc30DNAx5I4+qdZyOfmG6msS/I\nVuAe+bHhrA34HJskVU1zTwxj4KXfa/Zo5oaBXmIRjuyCd/Lj0jj/QM840yPg\nx9mQ\r\n=k/aR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnlPYf0ZftfGw7+wu3HcTesD3Ett6II0oErjZNF9MhoAiEA1n5Ext5GZlnf1y4CxD2TbmLziNtzFTLC4ppUsAyGJ3g="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9709302d0ff36ba04d6be38bf5716001474c29f3_1601683137275_0.29773389659236993"},"_hasShrinkwrap":false},"0.0.0-b09bb19c86c9afaeccc255aaf6508ca53df59525":{"name":"react-image","version":"0.0.0-b09bb19c86c9afaeccc255aaf6508ca53df59525","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.50","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b09bb19c86c9afaeccc255aaf6508ca53df59525","_id":"react-image@0.0.0-b09bb19c86c9afaeccc255aaf6508ca53df59525","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-XPCvtQKmfg+jivAkIzstToMBTGIqccouUIwlqOw0A7t7fMnQLqhhPwUzH/vcmW7rfw1z8F2qADDw5NEtOfZS4w==","shasum":"f2553cfb24c3b6f9f8bffbafc107c2d372939eed","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b09bb19c86c9afaeccc255aaf6508ca53df59525.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfecD4CRA9TVsSAnZWagAAcFQP/0NAkkbIk1T+EzkdHijs\nfLOWk77pebTKKAGVIK78cSGHDvweudxJvRQl2eklP00xaNbQFFTUrh9KDZ5v\nMZitpECBujRt66mKWI3UDbleIoA8hVfgL/rG9fQFv/wniIrydw61GKi8RXgi\nS7Xy7lRSfSGyWmhuAG4Nq80ure0Yy2yAiP7/BHkShgjqTbAtEfxmnTXUGPbF\nmd9F99tl2W6u+7mqptfozCYSaGqho3oUDmTxDHvVKKNe/ucZVgcxHSxmbQAP\nVniTPLcJU0zriozho/fsvTIwA/wkr3U2WbgUaOFibvgNBLGjE/KX880FI8Ap\nGdGh1vaILUGMMZfMPxiusCqvp4kb4Cs5550AcSbNurN+BMhlDb0uO8+Hbw2W\nEAqIJPRjexVwDH+2afpL9jzA3qSs6JzIvNPVa5CzXXOgkm/joo2E1j40Tr9D\nxg3tJoIk7PWUqB8a3pje8E9XZM0yGpHI4cJOiSBj6GHAPaCL3chMq0alqhjq\nPKhJ2MRKZS2zFK6cDrYewH/yQB7X9PpvaTQAZ7xSVNu5QaOXkHII2DdVwPu/\n6IZYlU+FDVP0Owo1mJYEE3a5DYqpvP8gjNDka1kGepWud0M17lo93Q7zpJPx\nh34umAbKbeGpDhjyqrs5ize4hqgLkhQxLfZT+AYk3sUBnoM4wVlBlw+YOkMy\nB9G8\r\n=AHDb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0FdSc63MaR5n1EpHMasQJWEjCIAP/WIq9UrF+AtdOhAiAy+6SUsvwiK/AMNUPfFKa9zssVQuHdc4zsDUGmhkt+BQ=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b09bb19c86c9afaeccc255aaf6508ca53df59525_1601814775468_0.7865600296722102"},"_hasShrinkwrap":false},"0.0.0-a928bd838ad0ae285caee296325bba1dd6403d72":{"name":"react-image","version":"0.0.0-a928bd838ad0ae285caee296325bba1dd6403d72","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.51","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.7.2","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a928bd838ad0ae285caee296325bba1dd6403d72","_id":"react-image@0.0.0-a928bd838ad0ae285caee296325bba1dd6403d72","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-j+c+gf84RdzZ8PqOXHzvasnixAd0iRbj4cnD1xJEPTcjE+qrKbmY83EOxIJnTE1g3jirVu/JFdz1209BXCMGBw==","shasum":"e0bbe646058d92384ccca51eea769e8733463abf","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a928bd838ad0ae285caee296325bba1dd6403d72.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffMuaCRA9TVsSAnZWagAArcEP/i3RYM6Z29swdJERJ6rc\n71GeFMAHwekusGrx9qGhko2g5n1Dv7EjEZp/qWYJPuqyckMaVkNtAZgKLcSD\n6KM5Ft8rqv4oGOfKwsIDCUCu5MUuJUmfCWF32g5WO6ZqzY6T/pDJX0mbw/P7\nqD4E89aMe4nJxcrzCoKBHjT9E/dvjJ+R13bVqkPXOcWJMqylZ40ChKpjqIsj\nELhdyAk3r+iikyFAPjOxR9rPoFPjWPvJc/xzh1jL//cQHSor8ieYMxN4Gea0\nkNT6ID69cjyL1+4g51A1B6qVuwmJOddiaWfskdFIAplxPr+exi3O5co6y400\nJcwoUcTjy7Smq5W4bXym86XArqLAN1359rmXra4ZqV42bH5BUDPxJdNnF5B7\nU2Zd5U4X/0/CBreWbiHHbHOgm/MgQ5hRRbB5GZwqQY1jquxCh4JPW+wZfs/8\nxDexfjHG+BIiEzcqJhX4XIiyFuNNTH5RPXtmLMaJBIh0eU3DkkNEPrIAdGk9\n0oqQox2ZX7nNB5Sg3L1dTrjqkYje6OlINYTfX86NyM+VNl1sgk6dWdZ8S9dP\nFHhTloJP6ikMYoFMETRQ3oZkv1NtMQBXYC/aFQT8Pt7EatpudF04bRSBN0CI\nzWx1tErPXOBFDBG3MD1AhhZN+cVnr9p6QGBEOaEY7Ndke6jx+uMTJ1ylsFPd\n/8eq\r\n=Qc5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrjNCQJYKxArrMpBqGMgJz6dFa+k8gd5tdDOVAMYNX2AIgND6S96d3k2cXfdiAX4oCaWjxZLxUtstQZTOdtzASnDU="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a928bd838ad0ae285caee296325bba1dd6403d72_1602014106013_0.4893147133176292"},"_hasShrinkwrap":false},"0.0.0-3f470b340d5dc34cb3eaf9c914f0d3f0f8db8ab5":{"name":"react-image","version":"0.0.0-3f470b340d5dc34cb3eaf9c914f0d3f0f8db8ab5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.51","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.3.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.4.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3f470b340d5dc34cb3eaf9c914f0d3f0f8db8ab5","_id":"react-image@0.0.0-3f470b340d5dc34cb3eaf9c914f0d3f0f8db8ab5","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-QXTwIjoy53jw7HuLk7ut2Xwwl2fP5lR+Sd8kGkKx/d4f/iBaTGBBQ4fJjT9nRYg+Togoi58wU63xeq6ciFFE9w==","shasum":"3e5a2ad4d48af7375e7bae3ea6f5f564a3c82532","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3f470b340d5dc34cb3eaf9c914f0d3f0f8db8ab5.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffN3RCRA9TVsSAnZWagAAcHQP/3HbUMRk3ADhDTsLoenh\nK8krAp0M29gaDH5AyuNLfcJ/mrLpYHN36S68vdhZIIW0Ejh/Hi3bY19LpM0t\nRT66XfVi6itAzb+CMbKiL5RuyCAnyrcw15X98vTQnTB9AvtmdJTdkEIOSTiV\nEINM27Q/Pl7U2gZtusIwdSWXh57k2Ko50hlyRqHk/MRlsz0pagEMhOp6/bJ4\nSbPN7zZTh4Eaq7rvo1YJw15MJfgjnbsU1GkxGDyzXUpvt2RwgAbWtU1V1Wl1\nR7utz8EVvVwVMuZyrzyh0vv2RRnOX3DAz/D0mWo3rEiJ3Sp04xp2ZCCQkoU2\n/k4q6pCPYFSGEspUTIJQMMqR1n2/Yr88c1E5RDfsbZfl7BQpK5xrrY7hF6zZ\n52VXTXLu+EjnxxXbh+7HG3EkZtWt9TUViqbBg55jIvYaBVsWl+G7Sj8evBSK\nbxv9guusXoC84XAIKJLIczM39t08Kpwn7gVAfWl2o9pZEY5ptXDHwLFq3Vg4\nENwBHYnAYI9Nojicv7mKHsKvuyjgc6ScU0eVhrGvb3EsgRWM9F2rbjdFAbOF\ncitKCn4cBd2sCdVl29Vs24fXnc6gE3FcK3p5MUweb658w0HkDpMzrty4605Y\nXiAwaaGNs5VCSD3lJOo3aBnKHovWauebf58GdUFiGRvuC+BS4E/lgkSQdIXh\nsvdO\r\n=haTS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSD8Eg7Uod8q0/8eIiWuF4ktnrZd6NWdeiva9mrucV0AIhAPdBgbQ2MRNgwuppopDlhQjCvsDhxm/fG4Vt5UTtGXA8"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3f470b340d5dc34cb3eaf9c914f0d3f0f8db8ab5_1602018768910_0.6442958930116831"},"_hasShrinkwrap":false},"0.0.0-134408928ca5887493a4a3232313995ced194167":{"name":"react-image","version":"0.0.0-134408928ca5887493a4a3232313995ced194167","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.51","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.28.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"134408928ca5887493a4a3232313995ced194167","_id":"react-image@0.0.0-134408928ca5887493a4a3232313995ced194167","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-uAyxtSIuHLdRT/k9pvcaHaIBt1WLHSnSLOV5KsTCZ+3geQUAiAcBIdFnR51eumLov99MZBVe+OdZMxOMYuSMhA==","shasum":"a4a86609117b5a77b7a77f19976e426049e188ea","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-134408928ca5887493a4a3232313995ced194167.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfflnTCRA9TVsSAnZWagAAPN8QAIpUZn2dZFWA0Cnh2Khp\ntBI9SPWPqQn8mKUmPmPUVa8hMOmrpUGP47XSpifJpe4oZa9Tr0SbYULgSD+k\nWQqn7RZX0F6AL4Od/HhuobI1d5V12xeFY4ucrERvFYcCCVfCbSCtEvq+j7Ls\nLedARUpRS9ExklD2x6ceVfgOmK3JhxaNYDauE9veBxZvjy7u3+eHn9Hi1WTK\ndDie0EQ3N4huZbsVkVJUoKV+xtaMDCd7I12F6s6dGIVuEmg271HkfKlraeTo\nr6Smj4a/w4xkyVmHIablJabRJVDJ8fsRrt+qX5mW2X/SSR4XjVHyGJ2jvaSO\ntKEIvx013r0Sw2phyIJPcM5A/J4urvf+4OZPAf87L8Cs8x2iSaxX5vRVy2TT\nJT1txZh0UqlTfHxs1FEgoMU1/Q46ukKsoFJ3DiQQj2nZZOxNxoY23ELYjvbT\nOjkQm1aQniYTWQNq19H69updx+NHEkZvKzVPx96kFp72eW4rFFJwkpUgJ7NU\n3N0MxXg1AXvUJVoLxSuEJzQtdtrCTqN9YIbqBnTlcO84nndpUHdQlGYlFjxu\n4WEhIci6MU8l4T76NvFq6mbGVp8oHLVuPbGajuu4Fjb9yBDPlWMpI6o0XHJ9\nS5aO4hxqXwYzCexzxkBjQM4A+tFQLOkM+jhRyR5j1Dw7CmJH1GgV6CkHDQpY\nUyOu\r\n=wxfv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDePBAfcKtC+CktekDQgnexnRg86sBY4yDsfRjb2nW1sQIhAKuDCLfYeWBFqG5jJQ/+X6d3v5d6hqnd1DfTjExGpXhU"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-134408928ca5887493a4a3232313995ced194167_1602116050851_0.8915601840936249"},"_hasShrinkwrap":false},"0.0.0-20c0bc35a23bea23c55af7761a45c0fbe14d181e":{"name":"react-image","version":"0.0.0-20c0bc35a23bea23c55af7761a45c0fbe14d181e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.51","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.29.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"20c0bc35a23bea23c55af7761a45c0fbe14d181e","_id":"react-image@0.0.0-20c0bc35a23bea23c55af7761a45c0fbe14d181e","_nodeVersion":"14.13.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-KJMGDwGQ8qNdglZ3gBy9cCWN+GGgJjYowGlGAL2T85vXb3ll5G5Je55LvV8ax7W/4zsath7zmggq7EBfSSL0iw==","shasum":"a7724aefe381f5371c286d4b0fc1fa88224696a3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-20c0bc35a23bea23c55af7761a45c0fbe14d181e.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgAEOCRA9TVsSAnZWagAAtvYQAJ/9szShLDSOyMqZnDqV\ns3KKtxMfoolZs9W8f/Oo9J1caUBCA1EUt4e/d2ivjJi9pByDGuVK+EC1YlnY\nkgDBMR2RSUiU71AMn2haTvWbYDIip4zFTfi8ofWqEyTl8zp6Mxzd4X0IhBPJ\n9rtdj5+X8hQKGO9/0E+iCp3MJEIAC4P9HEQ+nxwCGwzz7KQLTEvc01g4yZ8C\nko/tdRlw+I2BC/IkO8maDEbJH4RXBnb2HbpIPD22/dsLH5JECcUnE3egzrR/\nHzJHFxgTOQ7u52Fc9IeYPAhlp5zVVUOPh+TuoK8ufsKT4WT0SOy6mGN6WDOa\nlqfj3hOHGVX0jCWkSjsGbnadol/up7E3bKQU4DXipYCXSioS1uDncD6ZcQFz\nUAmfzYIEdcBbC//+/4fwv/fAhA4k9KaXo9W2hOmfVg7i3OLyV46tJezOQcp6\nylQ6x2obt2lDO0tcENsmVlkQC3B+Vs9ce5HjZQuvpxJOkM3BQoBAKtqLLmpN\n1Fq4Dw+zHNUvDqahNF4CsvK7bF2bAvtDblqYeKsdxxTEnlXhS+Iy2GkrfWRe\nEoygn3La5+NtCdKdAl3KRn8PrqbLZZDqQGXZwCjPy4nnKay8ZIC2Z1qOsIKX\nV2V8WvNYCbG/BSifqKaNzu+iILk2Cx2QECSpS8CTDYCNoqMefw1mk3L2cj3U\nVBQW\r\n=Y2O0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGixhU9yQG1PXoh6/tkYVl5EORJqm7dBdT+9iIRfuDnhAiEA3+Qrw+kARDpLZQjmC0G5sIOgZcHndV1mgvZC1TuBJJw="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-20c0bc35a23bea23c55af7761a45c0fbe14d181e_1602224397738_0.5115433179520139"},"_hasShrinkwrap":false},"0.0.0-7deb9561a5a2bae842c76f9f08f0717630a0769b":{"name":"react-image","version":"0.0.0-7deb9561a5a2bae842c76f9f08f0717630a0769b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.51","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.29.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7deb9561a5a2bae842c76f9f08f0717630a0769b","_id":"react-image@0.0.0-7deb9561a5a2bae842c76f9f08f0717630a0769b","_nodeVersion":"14.13.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Wie0GTos1E/qJzP+NSZhO7S/roPrau+DWS9tB4EOmH2TYagNe0KHMcvMiEE7z1ilZhpUarb/eu96TaFy8ZoqNQ==","shasum":"c4e4762f181459c96443c1417537951f25032b9b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7deb9561a5a2bae842c76f9f08f0717630a0769b.tgz","fileCount":20,"unpackedSize":38168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfg2xRCRA9TVsSAnZWagAAbkUP/R1f5XqdYlXOaHhXwgDX\np/ybQzlKgEgENtDBWlXHZ7XX4SlnIx2/CuVH1EYy0sXFIHg5Q77aIiY4ZtAC\nZ8L1tU24LP74tkxhJRu3GM77vVB4yA8RGqYlVrAGFJV5FSFVkkXP9y/z3na+\n5C4+trVr+BG+k4hB6Wq0i0bQ/sc83NJWF6KxaIQAjaVoTDAZDL1TgmllO0WB\n75ypGXHyn/f8R3JM9CP5M5Mm22xtnsrux71ndwU+nQjzMDhS798j9lQW0ytw\n9RehX0HuUbYw61pWVN0g19tCE1ZpVbZY4XN1qdqHdkjGCyvKOZwHJzlcRpTU\nU83ObEN1lfAFTS7pkD8zsohcddC5sRK5eqzqxaR9pgyi7z6YhBltrqjKIg1w\nklJb4IKDu9M/tzGCSoa03YwsFO719z/7Wxs5cqIWSGf5IpvlcPUzZdczlcuc\nCSmvho+rtEDPALujsN5Xm8LklVr0g4ghTYZz6ggOjAVddH3JgHBqFunHWUGm\nVFr5bgM7bfMi7nTrPKcCc4SmXibpjaeLo3L38wR3pm0+0vZ28AmTFl9qQS8D\n+6UXbBJ1EwwSpNXIsE9Vaw4VQxeOlAcGbdpH9nI333SIb+knYjowN1ixsIBe\nhRg1dbXrC8dP89BDbiDIoI4ClzeVt+3Jwrg5DPzoVuSZzn/ocVN6NFvIXa5w\nalTH\r\n=YUdx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBq99j8079SV7EPNI0McIwnx13d2ZCw1B09c5xFyx/MzAiEA4WYRKm5JpmMNY3z1OVsutF9gJAYk429toml/XR9IblQ="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7deb9561a5a2bae842c76f9f08f0717630a0769b_1602448464800_0.6763593335846199"},"_hasShrinkwrap":false},"0.0.0-03c275cf13d75fbc64310f90ce85121e0f314fbb":{"name":"react-image","version":"0.0.0-03c275cf13d75fbc64310f90ce85121e0f314fbb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.2","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.29.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"03c275cf13d75fbc64310f90ce85121e0f314fbb","_id":"react-image@0.0.0-03c275cf13d75fbc64310f90ce85121e0f314fbb","_nodeVersion":"14.13.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-rZhqhKg7gqsktOjuKcqchmM5oRbxvELHxsRAMip8uwHNptV6MOm0OZZH5mK9w4UL0mZCQTOeYsiFwZ+Km6PHLQ==","shasum":"ba6bff5c334b719a9cf2265504a49f27eb6b4181","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-03c275cf13d75fbc64310f90ce85121e0f314fbb.tgz","fileCount":20,"unpackedSize":38168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhN+xCRA9TVsSAnZWagAAfUAP/2kOiwu0yksqro3hUBkr\ncJETRbv5u8NcGGtpzK+fyrq4iZx1SRAEPN1Dt2DFjbf2RU+BtR2/DlT3QruV\nLbvQRh1V227cdtHeWyseWpNxFDvoMujdxJtsFukq+vT3ATO1Od5UDgLBShSE\n1aINr9jDvgELlRVMieI+QN6jk5UTx6qSDNhe2rs/PUHlkyclUAzHtJ05Sp2s\n9TZf5Mjotaszt53zh/+xVlav1MSwo/v3rDlMu7CUaeTTZSZ+JOixK1bmJe5k\nxX2I1mcJxuuXH/CUFXYj4DerNfNrW2Uby3CrGPAfGBhsujEuqV/lhnA+s683\nQzKyeHp/GNh2c8Cguh4hAqCP/hrsKr9p2L22eMvbTQOHxsIS4+gNXr8pA5E9\nepd7nxTrb8pnYdyMhHN+p3iPJ423WHzI3REi0xKa0TpwXPAWfkE1zw02kFYP\n1DxBL60Ui+hygfqnvuxCAJLsfzhsFxQsyO1A4OBBiWmUkrBE96caRAlBczf5\njZQv3gV1WLtxEqgQZUsFUMpah9jTx46MVBP/teO84WEvf7qQowSIUivEf4BK\n0zjdUrEd3TTJHdW1s2rFGzCgR0ZZW4+89i2i3DmCZHrDIUVJef3qwwFHE1p+\nSXhEbP0byvWs9XJxBxro71LldhNAoO1LjnmZuadt8wHLEm0ElIjv06RsUINz\n4H/E\r\n=AbOw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa2isVp5n3qDq4O4B4mCgLZzIzIYySihcI2L03Eu2CGwIhAOwzUVQB+uLHvoc/vydXQOxqPhp3rb4424zas+Rra/Be"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-03c275cf13d75fbc64310f90ce85121e0f314fbb_1602543536654_0.7013254860444782"},"_hasShrinkwrap":false},"0.0.0-8b0f4c97cb7fcb98eeac98c830d514cf7abd77fc":{"name":"react-image","version":"0.0.0-8b0f4c97cb7fcb98eeac98c830d514cf7abd77fc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.29.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.4","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8b0f4c97cb7fcb98eeac98c830d514cf7abd77fc","_id":"react-image@0.0.0-8b0f4c97cb7fcb98eeac98c830d514cf7abd77fc","_nodeVersion":"14.13.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-G3hO6WmwWWFoDRzCuLlSPwCknOnoy4U//PGX6VU9MTyo2kb/t04hdVMl7AfXW1Xd01PilquCjxBzBMedvo01iw==","shasum":"57c9b85469e575fdb2e04147674a772c2c06098c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8b0f4c97cb7fcb98eeac98c830d514cf7abd77fc.tgz","fileCount":20,"unpackedSize":38168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhOOXCRA9TVsSAnZWagAAlhcP/0KiMrm63HON5fPmbGiC\nI61eHXDXX4adZNYULZG+AldZRD+shm5tAemJlGNABiEkSXLlcOq6oP8S8BmG\nrF+1p29X5FDiVGWGwYI6aaFwwhkP8egB91ZHoqNvh7mYTPGKWHBUU4zZJ1lu\nRFqtT5shrBaI0edYoAkMcFlT6DBIq/hqO+DSadtzoK1H3hp4Ht0hitd1QYYP\n5GRiEVHRkI/V1wjPoITj1gUQhy8S2t3WKoMuApf6mOqamMR/+R16CGcRkiWp\n7ph5+vj+TSGOWTAKYvGL0yDqghIF96vbARllknmk0cBz+BblKWazeJhNmL7/\njcHHuNCV8vJaVGZ1mwO1MWPdCgn2vhsff3mlpS7SbZeqfLvUZAuMkT1Dh/PH\niZob80Lg6kZZ3SaKIkutAFHTqugY8+B8I7I9jYH73fgDaIMvlxQjXG6y0e6r\nwENBljpgSrTQRY0HN7JYsjiK7CFbJx2RissJK1cG3bvIOO7ubMQ9goo2WjtD\nB9Yf04uzmK9mXKb4QAVyMKrSA+EKRu+rpTAmC9gi0mQndvWoEWHBCwtg+Xbi\nRzKnYBhgl5x+NNYjFN9q0E9Vf0Pyf8/iPGdvbjs7XeTNs+9dJxduL9Ta9hKf\ntBGUrZI3PJTXnSaqMornHJGAQXzYUZPPWtKJf44lZm5bAkJCz4QUWOle2nm9\nqitv\r\n=U7Z0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwqBIAVz3qUxNPxtfICqg/gAtPmMnewfoiGkR4F0QwVwIhAKb2zpKKF+Fv3I/j2e4b1GsGH1qMn08iC4JsOdlTnCc4"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8b0f4c97cb7fcb98eeac98c830d514cf7abd77fc_1602544535437_0.06888219252850791"},"_hasShrinkwrap":false},"0.0.0-cedcb3a858abdf871e195b9cfb63e574e8e8a4f1":{"name":"react-image","version":"0.0.0-cedcb3a858abdf871e195b9cfb63e574e8e8a4f1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.29.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cedcb3a858abdf871e195b9cfb63e574e8e8a4f1","_id":"react-image@0.0.0-cedcb3a858abdf871e195b9cfb63e574e8e8a4f1","_nodeVersion":"14.13.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-rzqfzaTQ1ijzjaB0KUZ6x/lfB+oqHpD7p6CIfukINFtv3CbOHuZ0zAspxzT1Zd2txanQj2px17UvK9hxUJ3fKA==","shasum":"b775ff832bb06ff23afb423b25d4da43a3787c60","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cedcb3a858abdf871e195b9cfb63e574e8e8a4f1.tgz","fileCount":20,"unpackedSize":38168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhqUuCRA9TVsSAnZWagAA7rkP/jyopxzVi1jsnbqhfPee\n4uElrrmuSZQH0esy2tY39CMWGrFid/Nji1gdigj2bTkibcdd8WFzw3ZGAdnW\n+Doth1eC+lRZsAKABQEAQtjubxbAbcj90TATMBjkTZSBq0bnpRIw3YyCkw3V\nHKt+/6hRcbCso0in69iEPUijxTxqi3G3QsExVcrBYaJAd+iKoZdt2WUgk03d\ngC6KfSIoLJ+y03ym/xAZZxez/Q8s59yUsesQ6ntV8yba1l2yIaE9qdf5QX56\nrKH6JCxx9mBHmJ5MxE5YjGvrJAhcdUXrhgM2wo4Lbeqgd+wzCJ95LOWoWCcV\nRgiigOMSm52GmurllAPKh4x3aBwOz607eZBROUoC62j/YPt94IH0qUlWg1aN\ncDuRlOIn7YHfobaYUaQRwjAtc0kx3FrLuowNVoCrwozxmVJU3Z+f6xHX9MDu\n1v900+C7T4xNuZXWhkLc/EPb/L9x6Wwlej1N9tAdOJAwGaEA0DXWuE3S5kT7\n0w63uHNcdnog2Yn7blHkdGFyHxzvY9aNrdQ4WVc4hj0Ssv3VBIqkv7fCKjGp\nWmRMxaYmtcjlRbx691JcDtk1gjazR0i0zD4g8KE/ouzqLOmaHno22bo1oZAa\nZPiZb8FZpG76NcQL3KjEuFA6EGaI3woeCi1azw3wSXVJ3cRIscQKNHBBayn+\nsEaU\r\n=WYmh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGQipfNw3zBoV6dvMeNtlFIc5rE39Uy5jx/2kMj1EgYwIgYLKWuwfRyJwLeywDKXgSjwWoWuoUN667NvVRqYtF114="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cedcb3a858abdf871e195b9cfb63e574e8e8a4f1_1602659629929_0.21736799565149845"},"_hasShrinkwrap":false},"0.0.0-a2d653cb6bf37e1bafd11c9d5fbfdfe78364bf59":{"name":"react-image","version":"0.0.0-a2d653cb6bf37e1bafd11c9d5fbfdfe78364bf59","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.30.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"4.44.2","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a2d653cb6bf37e1bafd11c9d5fbfdfe78364bf59","_id":"react-image@0.0.0-a2d653cb6bf37e1bafd11c9d5fbfdfe78364bf59","_nodeVersion":"14.13.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Qyd25p3pMFdZsxHCWoiGjSOE7VxYn1ycmgkihkQcD/2SNDzkgnJCBaUJjRohDOTd7n4URhDeqcqk6TmkoRynng==","shasum":"fe1d82e5f60d744e2be0ee8f493663d967e03d48","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a2d653cb6bf37e1bafd11c9d5fbfdfe78364bf59.tgz","fileCount":20,"unpackedSize":38168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiBQCCRA9TVsSAnZWagAABGcQAJ9ZCPIUaeM7e/2tbYhR\nXqO/aTXLqzI4AYwRTmqSPlJcCcA0jChTABmrdaOiSTcA+dhcbwP4wcDHp53T\n4ieZgH0pA7YKOy8bRROEN9wHYyn1sFjl4U7Y/sQ0orZj+0lcaSzP3Gg0ZRXi\nvwN3k9+Fez6gIHLtWpipaaB+2UppQT5Z8EOYNVbJ1jzs2Y7zIVFy9RrqyOsw\nD3fqC/OhXtFKBtRetKIqs4jFRXKAkRxGIMoa31NdO4N0/sELK3YdxKyG9dwt\nuTLd1fAxhpmWDrvD5DovIdn250SNeeZl6bmn8lpEsxvjBYCq+GYNnmL5GjTU\nDA2tDnqWLC0PXlKrtckwpmPNfQguv5DSTwk6r3WgFsSYKp5FYtfGJh85Ahzd\nBhbkR/s2wHuNhw9lXp2mvq0I0iqCp2WXTv+sFYwF7XPv7q47iqta2fYmku/7\nQhy2FvZrNfPFQI240DzqbLSnJutaw1j0JEAlg5Xc2kmtqSMhxfNToAmUuI2U\n0MqjwsKAg80R+wmFpkExJQh7TwZGjKv7XWTHU6Zzfp83smX6moAZMMpT8nj+\nC1KHbOgTBFeZqnWrNeEtzCtYmHsMmO3KudoywWPc1x4ZcXHUTJ2Qo42DG1av\nyvlb9jFrj7iU+C79yxoir/E+Hhft2LFYyrmaSrj9/amIz7kmWUFn9B63ErDA\n8N3O\r\n=6hn/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFR4CR9LHrcJvDl1AIAqot4/rcE7BpxbpSuXpj/DAvNSAiEA+FU5vV8hNgAst5WdNmOK9709SzAcj1DyMnGMjDPSKmc="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a2d653cb6bf37e1bafd11c9d5fbfdfe78364bf59_1602753537754_0.4705073713512553"},"_hasShrinkwrap":false},"0.0.0-2645438a493a72cd23dda854195360c9355bc3b3":{"name":"react-image","version":"0.0.0-2645438a493a72cd23dda854195360c9355bc3b3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.0.4","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.30.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.0","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2645438a493a72cd23dda854195360c9355bc3b3","_id":"react-image@0.0.0-2645438a493a72cd23dda854195360c9355bc3b3","_nodeVersion":"14.13.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-m7+r+Q6rv0tfhVI8RqZCvHdFz+9Iq+KGh81Nc+NWHvEFhP3VgNs1nZE9k44vKjnZo/fS1dIwousNVZVDrkDdFg==","shasum":"bc020fd1772cec4581039a758b14d9da8eb3c193","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2645438a493a72cd23dda854195360c9355bc3b3.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiCZICRA9TVsSAnZWagAAC1QP/1v9Mqwd2cyAz76Y+z06\npnIJ1f18PJckSqISbr57p8os4Wk7KJ9c7N8vlwbkY+ikQlw8TwRgAnHUgiQF\nYZftxWc/+xNHS9FN6UIB7wIur99LSsRE7ai81m//CLTlFVh40Fuio7s81fFu\nAXPJJKM/PmBV4Fp8AahxFkWNfC3vkODPsqh/7xnSKXLvmrciBG4A3ecxK3wE\nTWaC8iz54Wmv3aIjyjjo2uxTIefOOwtOZdnu6kXOx3+kW+ukbQQBxG1qOGN2\nGXY/mhzltCDY6ZP5Obnah0W/hpVI2IAzYQh3wswJY0ZwN9wCIWnQHGCtX/aT\nzL9inDZ03ErB2VQpiOJu+qeaCyy61IvLSMXFT4w2UDGd5moY8qlmSbPthgMk\nhDULdv/OaAWZMH8HCrD3y9CnzgV9FIxeadNHPzome3Lxem6kHWNAjggAzb8J\n2M3uJH/Q9hSax/3pSENvPJgOSSClIahDGcA1e0Gy1BWKVgxbM7HOxVD00Gjp\nuWQ3y/hSci82RYQ53yJFYEQpHaXwOamqG7XFadr2kVCwJBRIs9G+dku3N/iF\ndgescTqsdc2cvFu4XGQCtm1+3ITl9KMGy6vFyUKiExMJLuuDhE2TY5tKwypc\nVF9awOJu3L+dUhub24/gQZ504+mD4KLWEfUzYsLfzYjka+Qc3KFbD+wntTIc\ngqGq\r\n=+Bno\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZj4cli1fvTlhXJ4ImOzfxBmdnDVJSoycK5Z3gM7FtWAiEAs4MKhrWyz133PzO/HowUcQ+K+gjhbyJo+XwsC58ib7Q="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2645438a493a72cd23dda854195360c9355bc3b3_1602758215540_0.13437762743186754"},"_hasShrinkwrap":false},"0.0.0-deaed8d97e59d0216bd25f5aa17c75a4a7b575c9":{"name":"react-image","version":"0.0.0-deaed8d97e59d0216bd25f5aa17c75a4a7b575c9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.1.0","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.13.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.13.1","rollup":"2.30.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.0","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"deaed8d97e59d0216bd25f5aa17c75a4a7b575c9","_id":"react-image@0.0.0-deaed8d97e59d0216bd25f5aa17c75a4a7b575c9","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-j1RW9ikjZLc540M0EB/Toqqq6PCbA9vA0Q0jR2ILKB/k+1weOtzoiZo5RhwrDcrCW/2q7VrRE3hPwDzYyXJLwQ==","shasum":"61ad4b2088f0330d7b702c02873bd981baeed410","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-deaed8d97e59d0216bd25f5aa17c75a4a7b575c9.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiZ6iCRA9TVsSAnZWagAAvB8QAJRo1CwYd9EkEhyR+Vqt\nfl5o9X5sejCDBnTrKZPdWt5Q5Mg/gmJZxSkVBsx4gWrdb/zdxOXyh/DaNfbn\nfue/dKdIYxOAI3ghZCjZssyBjS19RwbEx3IP/mlBaGx5DmpfIw7bJ2PpDJXk\njK5phVVdpe/Ewsfcrmg/K96lF2qzVRujLxMSwtmBz5sesPvZRyT4vs4+Muwo\n/OEGb9pH594tlhUz727ekbCLufh7GRarztkeU6q662p6ubthv4Ib4dgr7vdA\nqRlf/tabmCHvd3ZMc5pLSobSomzRXkQwJQquvvb6b345Ey0C2UiyUicQHi4N\nw2MKafn2eu601+mnSTSYCZa+U1DCx2rTQbY8jhq9BTRHHlpxY/qGxXEQJ7gp\nsE+ym5c0ORY1T1Ab18w+lhNc0yuYj6foeSAYl2JGRI2SEAMnhRYmNyDeMY7D\nF+2jffChIRHzo9wMaTFgl4VBbCY+POA0TSa/69i94mUQHJVf9Tax2c+7wb6S\nBa2DbcqaG722HrQIN75BDU/dVT+ObfO3pMwWfJ9jOMYs9c+/B9993NwNGjDz\nMmCW3mnM2e90fN1fTRsN6OYFx/lj4YSOl7Uh2Wsz4OJqRMFaudUQeOtwTf+E\n8OlOcNvIbfDT9tU6PsixKPqYsSBPpgZRQhqcjFubTvqXVjUpd+7JsH1YLoR2\nHxyw\r\n=P1e9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU1clj5hwbujPdXwO8NNIwZNUP4Jf77tr006VDnx8YAQIgXulFJEg00l4UJzyLG+33ZxArqpQA/+2OaRfNnGgO+4o="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-deaed8d97e59d0216bd25f5aa17c75a4a7b575c9_1602854561548_0.6389850868173608"},"_hasShrinkwrap":false},"0.0.0-a632516e031f8c3b76f955894e8bcde9b9f4628a":{"name":"react-image","version":"0.0.0-a632516e031f8c3b76f955894e8bcde9b9f4628a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.1.0","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.30.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.0","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a632516e031f8c3b76f955894e8bcde9b9f4628a","_id":"react-image@0.0.0-a632516e031f8c3b76f955894e8bcde9b9f4628a","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-x4az8HXB4lu04c21Dfs46DOE2l6Nf2gaxGSWx5QIzdUVmEdupKu7seEassYHzRkm9VBKZqwCwEsAOsEORjCCTg==","shasum":"72cc3b1f109ed79a4696597fce8210e31e984043","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a632516e031f8c3b76f955894e8bcde9b9f4628a.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfia0/CRA9TVsSAnZWagAAXLEP/2WmkhKQmO4zSkV6yhli\nhBfS/zWxPG4Z8aA3F1bcAqzG3IrciehHoX2lzKULg7uf/5ZYvk+cyvGa93VS\nylYvXF8nfq/RyF5u5hp9sHLtc/ysjW/IZWjzWm6eDwKVCTryAegRNM7Qdi8/\nvaFRCe1bfeAQwtObRwb6zrFUIJu9DmXGg9UFKpHvQeADQiCS68TQciWBxz5g\nOLvogUeB/gNTo1QxXBpmDiODWszj/pr+PzO2edyfQx5eoJgD2bQMCdO3bV3F\nM5YKO4upDpvZ86opN2NvJdgVriOoPw93krf9qiGNsfP2cRmKYXrLjFzGLcEe\nbKl5HbwRuIqoFt4ZgXbH8mudYeVX8ijkdBPsPJXUjD0M1aR/RaSf6/7LMutf\nmNd1RiEj07T3aURx8S8eIB83MdatMDtuoGmf9Y1RPwebba3Vf4ea3O6yfsfN\n8Y7P++n4Aw7rTLFepODwSfPyh+EH5+fm5hTPojsJenwoifBYhFBDqH3yVz9s\nVgJmwjH96vCCGOVw4fTzoAlebtZB+PI0TtmYfMaVxN6l+zcVhAu+Z27q+vtr\nNAvlEaC9OHzHzGQvCxf/4WoceM5WO+JnbAUIb1q0lGFmMHuDvJswYwgPtXAP\nnMnZkjvlc64y8fcyogDb3zRBBhgvMllX+9rfqhxnu1eJ/q4Cwo/Yk6nL2Vk1\nHOg8\r\n=fMrP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx/NxJpG7Z8wXXg/nH+SU9MUYOYQ0RzIzUK5FOKtO+ygIgaoIS9lR8sw/qIiJqWAG3LhU9qXgcEEEK0oMfFhsSR2k="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a632516e031f8c3b76f955894e8bcde9b9f4628a_1602858302765_0.05757792190604194"},"_hasShrinkwrap":false},"0.0.0-40e4bcebbf748987eadea7c4b358922030ea568d":{"name":"react-image","version":"0.0.0-40e4bcebbf748987eadea7c4b358922030ea568d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-object-rest-spread":"7.11.0","@babel/plugin-transform-runtime":"7.11.5","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@babel/runtime":"7.11.2","@testing-library/react":"11.1.0","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.30.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"40e4bcebbf748987eadea7c4b358922030ea568d","_id":"react-image@0.0.0-40e4bcebbf748987eadea7c4b358922030ea568d","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-7pBAePm834UBIBCH6bS7erWVju3EjxIqqjzESKx3kol3eaeuU5ls5Xco3s11sM3oowqlQGdEeS84QyHTF2KoXg==","shasum":"d8130fedda42ec08c5458c40a47e4da641abae66","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-40e4bcebbf748987eadea7c4b358922030ea568d.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfix9LCRA9TVsSAnZWagAASEUP/jl2plGyZK+Db3HdrieT\n5a60SMFX/vgtk4qXhMkUTgsAUJq/JERz9kFK4T7QzrnDaEa/V1K9/Lq+8KrA\n0YPnjHevlC81Uq9RVsnO0Bv/Qc+K1WtLqgdwp5qkqPTm10jy+o7RnV4vphg/\nnZVLpnGRL9UBnNvSLRlY9Mh//SErHHKXfoc8g+4ZaoxVxI9ULNHFTc4gpE6V\nxO9py2XuVOkuE2W36X89Q4Cx2q2jrBdM8JYBOskMuuWfIUP9Ehs6xvzv4Ey6\n2iGQjufS1E/tYfBxGSnTaKBodV7Fma6d9chu9XpOX/M1EAUnRlKsWroUSxsv\nJ7mauYszvKMHZrtEq+0dFr/Y35yJa24kyuxbGyKJevd27HuIwVrJxcL9DVhs\nGCqZ6sK0in0jzaPdbrSZ9R5sS75RbasnWOVRn5fGTkgu5GrhTmxbvih0o0i1\nw8RqzL2O9gEF10OyyO//HegXh7WqIqs6DdEDHidU4MSpvfxJexBSF3vXOg+h\nB6QdGbIZ2Hp+K7tm7co+nhVkbgix/82u5zqseYWdSCH3WGO6Pksk3ULZ71s2\nLhP8MYqHuMAwDVj1PDY0wl4pBd8UXQS3jZYs8LMAop1dxs3GjLZcN37iCgmr\n4zzS0vkh/S03HLJREoGaA7PjyK89NUuCiycmBpUoATX0RKllKqkBQwTH5AYE\nrhqr\r\n=NuIH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVpgXwR3D0/pCwubH4Iq/czEPDptdXit5Vb6dHBMRvoAiBeZfZoPJAQKdvwMt6raHF7tBJV3/BW3/W/HsC3XmSQZw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-40e4bcebbf748987eadea7c4b358922030ea568d_1602953034577_0.11744716969948032"},"_hasShrinkwrap":false},"0.0.0-15ebc72a6249f82ae2e3c53f3c421a0f297f55ed":{"name":"react-image","version":"0.0.0-15ebc72a6249f82ae2e3c53f3c421a0f297f55ed","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.14","@types/react":"16.9.52","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.30.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"15ebc72a6249f82ae2e3c53f3c421a0f297f55ed","_id":"react-image@0.0.0-15ebc72a6249f82ae2e3c53f3c421a0f297f55ed","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-I5OB37EyjiLgkJ6HPn2+H+2Ch4syqXqQrUo4gNMxWyZooZr+8YQNXTzNGqYttUbNWiUYcQ6kwVnDJUD8XHrdmQ==","shasum":"7596bdbafeaad100448b51e6dbddaba67a5c4df7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-15ebc72a6249f82ae2e3c53f3c421a0f297f55ed.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjIrVCRA9TVsSAnZWagAASCoP/14OM9VZqWTguMcu59l5\nswJykku4HYpA/6bbaJRwbBFcI8ozWtidDwO2b2LcvcBfh3sGNDtD46ocDJdL\n4+jE2kbGG51yPTfIgIQXuLdy+2oBD2Ckaq4SIQB2G0qr8u+2zgIXDIv4jFXy\nf8+43Mc2nlPi6mZtql42+rbxfmFa+zyX5QYQPc+lbGvmoye0noIkUI1lz/qA\nAsTUjXP1V71ClbSz1Bzj2Ky+UHNj4IiNBgFDU/LLJ/UwbtPZBfGpouxFJSH1\nDkKq4FkjMb0htLIrJQwGxm/FfYo5JFcrBo7H0CmCZL7RLyNrORsE4n+VwIie\naySN2AL3yx1///gQHvJb9owDMwH8UxnddXiaF8f18moK5XUYarQHMZGnAAxG\nOZ9yoGZVamBtpej5G7T624iv73pNerEXBtxpG/LPTeDbQIDA2GC128V0FWAl\nDXVxgrYxy85rwM81USNlJXidDDIOQwZzypCkFKiOPvmD8i7nW85Qvlg+A/Am\nkK5t6o6AzAZ7N2GHuAaX4ljvXEIHXKxsl2c9MNXAuuaAotYhhk1LUNS6Es01\n2eHgY6EgQNiXQI/9kWkpGpO6jIwaRoJcSNiGzUKbkjYaBPClT1tTLGt/dttq\nVVCKA03Pjk7x5t0HPXcGqFsUyDncU362gj9tEBE8OuIwS+IrL/bq9IDkhy2d\nb0jD\r\n=NxmO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZO+YUMI8AwaPy0cPTDIP1t8UsoUX0GqL0hsEp6vNXHAiAkUfFBCYzlnSUbgODk6s9Vamndx6IW0NHeuvVbmiZqpg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-15ebc72a6249f82ae2e3c53f3c421a0f297f55ed_1603046101106_0.10067833859844266"},"_hasShrinkwrap":false},"0.0.0-03b69f70466ab3f44d5a32bfd855388ee9d6ccd6":{"name":"react-image","version":"0.0.0-03b69f70466ab3f44d5a32bfd855388ee9d6ccd6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.14","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.30.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"03b69f70466ab3f44d5a32bfd855388ee9d6ccd6","_id":"react-image@0.0.0-03b69f70466ab3f44d5a32bfd855388ee9d6ccd6","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-0O+gF7Xmb13ny2qjA2ETZcjXQ2Wy7NnUXmhewidER7CxYcf+rN2Gr1SQlwcWHrePl6yC7HTbi8BeNmTtiLAX4Q==","shasum":"ee31fe28ced5512b9ce8a96782b8b1ec1807aec2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-03b69f70466ab3f44d5a32bfd855388ee9d6ccd6.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjJd8CRA9TVsSAnZWagAA8ZUP/0dih7yAGbLD7hmHZWP2\nNKcfAa0IMBpq/x1z2UCwv4vhEnrG8FShyIa1149wRExps+PwQ4Fb3ERrQE4b\n/26KAuOcQsYDBU56EDC5lt9SwwXfK25mHJjLfQX1PCXLRnDFbo04+nMrFR/K\nNlGTe1EJs/rZbtT7SYXTqIPuhuR6VWKMystyA/1klG49P/VF8bfMuPdN4vI5\nx5BGyNobqMwDniIb9j/fqafZUNQBM/C7dYOALKDoS1FnSrOmva7PzQ+Sae5b\nOzuZw5qXXjyJosvWo/fHke5j97PX8YHS9nC7jnRm3s4H81XYuoUNAbPzjIys\nl68DfQUFEqVBhJsd+j6137OIjg49xywGS/yh4glEHDLwWAXaGi7btKhPfj/G\nUnbjrnK0oPQ6MMW8BGTiKk8/ELScdi0Y0dIoAAMTsxD01aeUyi9Tf4pw1JhH\nqoo8o5qGqAqx/3GLJtpt4WjBeT7OoMV7I4970x4ELg+YI8g/qKv9+B3gW8In\nDt9FEdq6k639xIjOzLjkxTkFNkTpA0XRh8Sh+OvT5pEl+BF0zYfefSTxgQKG\nqCAJq0QFyW8KoCA9vQaVeD+b+TmI/R7RoEQY/K55Ww9gpyCQr+iYuOXyfAN2\nA6VGk+8MjgwnCmQaOGLSKby/rfACv3PoKrM25KLLbdsJFde9yul0hvwYk0gd\n7LIj\r\n=338R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBmwVXH7LEZhIKFEUUJ4kQEr7NtLV3TqfNZOWWshlu0AiEAliBiAR+Y1BVvTytWvNjRA0wPMgBI3bw+88xemkDXHlQ="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-03b69f70466ab3f44d5a32bfd855388ee9d6ccd6_1603049340334_0.5434552749770634"},"_hasShrinkwrap":false},"0.0.0-37d6d28c63ede4af0e8584d7e9dafc729072d8d7":{"name":"react-image","version":"0.0.0-37d6d28c63ede4af0e8584d7e9dafc729072d8d7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.14","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.32.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.0.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"37d6d28c63ede4af0e8584d7e9dafc729072d8d7","_id":"react-image@0.0.0-37d6d28c63ede4af0e8584d7e9dafc729072d8d7","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-/+Kd4tilysrkFvjmt7xKe3pYqZx5kjchZHM2A+74/Zn5piMeomW6u96Y0d5gIHPqR5032lzo1KMy42xq7ijf+Q==","shasum":"ca79cd4e232a7b54ac9e6b16f0bc6c54e5e9ee13","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-37d6d28c63ede4af0e8584d7e9dafc729072d8d7.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgW1CRA9TVsSAnZWagAAGdoP/RT5dkQGQm5WLXdT8ao+\nzoziPQvSOHheyUffU8TaOGFa6w4k6q/LAPbHUnn98/9+P1DSHBQu7gZBXhF+\nRd/IuphndyB0fybDcCMSJ08J6V/ZDdibCW6++N4AaCS3zzP1IlCmn3KDNuLA\niu3fkqSJyTEtSvPlKczMzDciAfxL7DYECnGpJtCFdUxraU+nMLMQJ0m+6AJg\nw1YUbITtOqqwqbeEBmODISjC/9ZbJJwBRBw17ID7e6oY8s1wxnDlr2tReUvs\nWv3Kb51w3Pf33cv8dnh4plkeStNCfFPc5CmN9ds3Fl6GmbT5P29KhCxdoZe1\nFWhQwtIc/4okxxYfpE6BfsIxtdQmutumnS9dTQoLNFVPIAt6UiOyroN2gmMx\ni4mmNL9UX5v4eoGs3mVP+wQMru6Dz483OJlmXrgrSrKXyFDOtMK3rM1VFP5a\n/I+ScRgydfvKnmMax4mPo2X7326UU6gvBgxWVXe90fXO79sEbx0iOerLoPYM\nJco1/aGyajQBV/i89RfPGGkOT+nyufr9LN/+MPHbTwE4afJ54ho3KuacVRc3\nNCksGCDNuxU4MlFUK/Lah1GQcbIOxMT7lOBBq/AJkf4RLeF3feJqM/5u5cPm\nqn7ARcE/MNVQS604VEmFoOiU01ZXWb619uFDW7W/y5iTdIjCFznkFFzKrLZC\nzhJ5\r\n=sfwc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzQI+MgEUF1lvSUNrcMTyUV0M7m6ZWmMd8XeAiHGSa8wIgHMsAj191ElqCuouQwRDI5h9prQ7PXo4wCSfDj9+zkBs="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-37d6d28c63ede4af0e8584d7e9dafc729072d8d7_1603143092719_0.9936417591240125"},"_hasShrinkwrap":false},"0.0.0-f6d11ad3a00180411c651d15c96cdea3d255a635":{"name":"react-image","version":"0.0.0-f6d11ad3a00180411c651d15c96cdea3d255a635","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.14","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.5.2","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.5.3","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.32.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f6d11ad3a00180411c651d15c96cdea3d255a635","_id":"react-image@0.0.0-f6d11ad3a00180411c651d15c96cdea3d255a635","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-cZGS1KgYyL24QTs6tD17r8RtxjIjceIKKy37x3N62hQnLSrOhyQrkrxgkmgM7ZL5SPk/rkcVF+houBSwfOEOpw==","shasum":"505391138a3007bcd6476495ee600d7594d7ce1c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f6d11ad3a00180411c651d15c96cdea3d255a635.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj3b9CRA9TVsSAnZWagAAtd4QAJPx6LIDnFpYeqgYMpqf\n3igeDhsD16jdXxVK3rSGIN4aKYl5/joVUU8V1dkUVXsRFT/v5JcM+m7xU6tx\nQ17baBzSW/uot4W/osLW3oe3T/AsD9hyuwPlwCN0EVtiECaX6amrywWMItQS\nbInYfJwoZSf592AwZqIgPMTRzTlmli1aBi8W+3aXSVVzHqFK6mRTtvOi/DKt\nmMzHv1o63SYpnAzyQDLVGcaTCqFjy44j3Fy9Ftp27JS20IOl+AcqHY1NGIV7\nreAzFeR9ohLlsAq+ELYcLQLu+2Boc9xul1mlnE36VWa+uQvWzA+sqp6gEsxh\nSRcaUvhk9cWpB1N9YnRf7Nl7w7C5f2j7BvuMVEIkkYF8B5XRf+xH1oyUxFjH\nEsuWRrRTyCbKr34Y3pLwu3UVuUo6WxYe7STnkzUuABsxMQRaBbz0SHdAgZwE\n3POno1e4d/y+3x/a0kYZBrvlf2beRNd/3RL98ZYy8fYlSVo9nG21B8h6zPxq\nfmdpTvmXRmj8knHfb0GIRirv3VlYtBHgU6wJD6YC6j7rrrtijOFeP0LjzSLb\nCpam5/38oCaEIdDhzmdVs7zPoutTVZIXXaxVgHw+LAAkorXGL+O0ysoYZ0h1\ns8ZZ+7Ltu8dT3QqkJlLZZk61IIVyvXh+lfQWgaw6N8HFeM/oxUrdrnPpZMFW\nj1XE\r\n=597W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcJnruURcuNWuUxfP35+vDfwyr6H6HHqb8v9u3RIeqaAiBDHh5XFP+gk3Myo4rzSLm0/+4yFsGmi9u11nLMLPGFyg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f6d11ad3a00180411c651d15c96cdea3d255a635_1603237629324_0.9557600379902851"},"_hasShrinkwrap":false},"0.0.0-d8dca1104379d1d11acd12c2da9794ae72145d59":{"name":"react-image","version":"0.0.0-d8dca1104379d1d11acd12c2da9794ae72145d59","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.14","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.0","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.32.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d8dca1104379d1d11acd12c2da9794ae72145d59","_id":"react-image@0.0.0-d8dca1104379d1d11acd12c2da9794ae72145d59","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-x7hG37lSD/GVAX+332Gwh/qX3PMH1PT+q+LpIEm59ZCUu6a7tQNa7OOyySkn6rH5/DXREwP1oat1ps7J//VZjg==","shasum":"b2380b5c55d5c5d2cea7a3ea16f6a2e80c1efa4d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d8dca1104379d1d11acd12c2da9794ae72145d59.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj4aRCRA9TVsSAnZWagAAF4YP/RAH7pemwwFCaV/YiIGx\n2FuiIO0ISQlYeUGRWN4JVlVzzpNlnZadBZ32tNtqvDfC/Rv8CloreMkM+GkD\nqKal1iylOFI4ArqAITTzPYlVJjefcvxLq1SiWnZJuMOQupfOdSRL8gukCO33\nrlUDPXp/aP+9XaqJg6fyWQHMxLjJQirmGFIk8Au/NGb6jG076nhCskgT/kJM\noAQX+oIwEsJ20RgL+4qD/4ceYPitAls5j5bjWPhcqVQ0LwtvKEHMheyrYNlV\nfBUoYzpaxKv1P5iZTn5pQTITrFX1eiLdpxLMweFmv9lZYEbXqJIF6nPMYea5\nWn6RjWhkNhjVOfujxZoIQsMpFo7+cU84woQYEcLC5YFK65AYwVYQySyluofU\n9c5CV62n4jKj1cfYFQIoHQy2vucOf9H/33V7a6YccechVVjjET54JezCdE5g\nEFdoVATf2aK4gdrQOUgwa41A++N+nH98OePewR7rA6ji28qL2JF8dcYt3NOI\nq/tsZQ/8y7QPEHMoESgGGEDBryKO9mF62q4SMpRP5DaC4lTKbIWWZzje0YCe\nffpSkUkJMzjl4sZh15kIgELM4cHS7UPCxUKqAWT0Fiobj6ghMepJsodDOYar\n+Hyvjdv3l0+2bE4chcOWYsNEvIftLimmNca3dd7jApEJfUVe1XeawdaOzCTy\nszc6\r\n=nIRH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMr3amYqD7GmMwfKa2XtLNYPnpQZNmMaX2nJ+I4VJp1gIgHOuj/Xi3vKNv97N9cjrG63mrpuiSsqre0g50HaE3ybc="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d8dca1104379d1d11acd12c2da9794ae72145d59_1603241617170_0.7950958556214431"},"_hasShrinkwrap":false},"0.0.0-0fcc1b68a07b056853928fe5559d4460a0802586":{"name":"react-image","version":"0.0.0-0fcc1b68a07b056853928fe5559d4460a0802586","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.0","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.32.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.5","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0fcc1b68a07b056853928fe5559d4460a0802586","_id":"react-image@0.0.0-0fcc1b68a07b056853928fe5559d4460a0802586","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-YEkpxLbLYhG7t/ojKHS/gEa8Y2uewhh5zQCclbiyhIL0oY4NvNQJy6nym4pHNw8FKdQvgmnrXy/e115venBPEA==","shasum":"394bfae2d7b6ac7c1a43a67dc2e9a1e85cc7c32f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0fcc1b68a07b056853928fe5559d4460a0802586.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkPg2CRA9TVsSAnZWagAAOc8P/1giTSb0dLyym3ICGtWR\nkUMGeEGB0Nf9NHn+nfPIIXLN+NCqKvP5IjRiT5bnPWcRBUxHwiM0fatnxjYt\nlmYHeP/pIc+E6VF+06tvyXg0Flpmu3uCdJKHUiAfRgQ+4MbVDdpWcOQATO59\npeSM0F+ci4/3tDFEZBlWsRkgz3Lb7dlQO4+HHCW8/hOaIo29aXrJpKYYcqmn\nCKOPStnOoeTDgwGTvJEpND6OdncOmjqRX+ZC4QzcJCQ+UpmxTu35xHIM0G9p\nu3HUt//8PksykW2ClbQAuv6XSyi00dVVN+CWZbFDMCN+rJjPxHJcnR96BcJI\nDDtmeny6vIn/z3DKfii5I9AL+iHweLT0WZewrifLf7b/o9F2u3vPIZ2EZVzJ\npVo8E6ZMcb+1CWbYeyq+DAt5VHV0Z2RR7X7zWcBoqgzCrxs6VkVjil7a+g0X\nc4akCkVxpah60DVwS07T365a3VlDKFm8iLyuMJ+t2H1E5Fhi0NcLrRYYTvcT\nDZsZfxp7nBkDIBEaVAYBXbvGvWiI26Qa9WczOgOGpuHU5N8rnI+ZJOeed4fU\nHCxsx4B3VcBHHzrpUGHBeH/pWUb7dIzd+kGhcljdqQZ7fBvYiE+/yKgG5nvB\nk0bvRUy6KEBS0l1Ip+JUGv6klk1PqTC3Wn87IsKBhOGVFrrWzvyn2KW8+iMo\nTkFZ\r\n=REzQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdvjIbrE9nl9SjISAzCFpLTxFfm8c/Fw7jrTz+I6g6uAiBHL69VfZSez3i5iPMalsQZrDT478dJv2qxNwHLBG+nDg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0fcc1b68a07b056853928fe5559d4460a0802586_1603336245950_0.16808804452871362"},"_hasShrinkwrap":false},"0.0.0-e85863d97c098927901243fdec282871cc5ddaa7":{"name":"react-image","version":"0.0.0-e85863d97c098927901243fdec282871cc5ddaa7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.0","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.32.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.6","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e85863d97c098927901243fdec282871cc5ddaa7","_id":"react-image@0.0.0-e85863d97c098927901243fdec282871cc5ddaa7","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-5Pl0PlN3vHNTHV+yqFnoev6+aTTpjHoigA7X6DwpqPM0kfPiOMPHKd/TAYh92Ze+hi53grhvm/3L1u+sMD5M2g==","shasum":"0e16de906a6a1d7c4757dae4f620d9df419f80dd","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e85863d97c098927901243fdec282871cc5ddaa7.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkQl2CRA9TVsSAnZWagAAlQcQAIRFXthUGvWa3DNVmI0g\nIw00uJeLlDvxsKjZuTFNElcJgZpRc1M02lfcV1MUj/FIUnvXFMNPBb4iEexO\nLmBXOfLqamRDW6pHh12v9E2PRsubSEM8qsNovlG7mb6PAYY3qHD7MjB/YWDA\n5l/elOB9WNZz+MISlp5poVV4G9tcZGwEJL1kCxFbjytHwtwEPqKfbAt3GVra\nD8crUWWmS5Cs1gLXtQTFLKm19UBxZ7bftYKG/8MRjNz4EgSlPLCSYEqCtok5\noPNbaO11MWJKC3+XDWuKEEYP4bSY58YlyWEBnpBf7nOGfOnMjpekuoOaxlvH\n95wfTRFte8PXoADzxHk+sJudySckv1mJSiek7oL1H/8q1GnLqDjMR7JQIEiA\nPtCo2K+lb1SgUqe4hgbgz7xP8aX8p0fVJcresUhmNhba1VD1wvWdgfp7PAba\n/Wfso4B5ZT0vcuI+0eYg27qmbDGnwaqMXhUY8wOJqquiZtpxTK9zZP30UMGe\nQ2w4VbD0dgSiJNxfy5EoNRvygMpiMW+NWVBuzKYOCSakZYS+kA4xV9VOnGPt\n41U89nBt54IKOJBmzwJsy0AdnPPSRXvPK/MX1zWKi9V/YYpWVGkMFWrtxf19\nV/Aof9IR5gilR5QfZHGXl96vMgOTyVwi/jM1ek4wLOmTLQuaWXzwiu5ZkIB9\nHmdB\r\n=9xGB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9SkSE0vz25fBizMmF8AuKfbn7KmJZjq8Ed7T8xq7OEAIgInwl8Jrb6U9/90/y/qQLb42xaIzF9yMoKzgqsPLyEIQ="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e85863d97c098927901243fdec282871cc5ddaa7_1603340661897_0.39483706108120264"},"_hasShrinkwrap":false},"0.0.0-a6cf46229c3fc69edcf7f047ed9320ca77e7ec8e":{"name":"react-image","version":"0.0.0-a6cf46229c3fc69edcf7f047ed9320ca77e7ec8e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.0","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.6","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.1.3","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a6cf46229c3fc69edcf7f047ed9320ca77e7ec8e","_id":"react-image@0.0.0-a6cf46229c3fc69edcf7f047ed9320ca77e7ec8e","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-mwc56vrrkJ3srLjJg5Hvcl+b5R6Aq9iFPoiRWZioGpox054Eet+HfJNuxwi7zzJc0UaCySZZqYPXw+v1+WwxfA==","shasum":"00f6234d21f212d7ad30d0189496e85b57aabdff","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a6cf46229c3fc69edcf7f047ed9320ca77e7ec8e.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfknqOCRA9TVsSAnZWagAAk5YP/iHD1bjK5L672Lz2NLz9\n4lt4cQGtXA4s1Ao0BrmwV6pQ/h8Ov/XtUgHTWlzbfFDJWC/ZoDjtUVmilrce\nVkh84lEkWlnFdxkLGsnLCtqlVeS8Etdv8oDV1gjUfkpuxlaApuJpUbkwuaI8\nohDKRF6BqM4T8mhBCE8j5jJA3Ksoczx0fzcgKOXSUW2KvuKA0NGQR2KNC42c\nkg2Sts8i0CXWMdZ18qIuRgg4azJrv1AKbJmM0sOfwBkKd/RA3T4cFUyNhjer\nrjTUBy/j86Bu6W1BJPCPslOe5d16WX+lXE7Q9EFkypBaGmq63wOji5iRJZAw\nR60KV9hrK//UOD0b3Hst1BC2CsB0W5X3t6QGOG3nTor3LNv/QbroYLKlFxCK\nwBUdDofpboVRFjahXarsBWvoMgIoNn/VfAejk8NPsOq3VMUv6c0fQgxJsEE7\ng5jEC0Kt4WpFvfXvO1fNsJgh0i/s/9GbTEliksC8K1JxMgYbRQzVfbCEJDuI\nICQOBQwXjbd99+9rdrrb0y7Rv0CZYKgpX1mFGFD2kutkwKOsuR2a5QVO6vO/\nDa7MKPo9VK9iMgOz5B+DtMZF6J1h7mM3y0UpGre020jua+cOHBwAesJOA2MX\naxhwZdV4IQ0h0RS1QcrdxRluysIo50E1a+qkMonV8uqFS2p5xPKnLggm/iie\nTc8E\r\n=UdKc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3Sw3wkLArpZsgUP83EaJ/Zab2jNLs2wTw7j0tfxz9IQIgMggStRsqghJnh5CHI/vYX9mRQ6yb1M2RfOq58kMZUFE="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a6cf46229c3fc69edcf7f047ed9320ca77e7ec8e_1603435149405_0.7914548114809961"},"_hasShrinkwrap":false},"0.0.0-9146a1d6437f9126cb42d382e970b07e17fa859c":{"name":"react-image","version":"0.0.0-9146a1d6437f9126cb42d382e970b07e17fa859c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.0","prettier":"2.1.2","react":"16.14.0","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"16.14.0","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.6","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9146a1d6437f9126cb42d382e970b07e17fa859c","_id":"react-image@0.0.0-9146a1d6437f9126cb42d382e970b07e17fa859c","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-xWzEsTPQTMmmHZQTML7AgpC2m+F16lRGe63vZj76aEPBLK27DEHlPGRUs8WVU5S2RyVosbnlG4BZbtcBE2T0MA==","shasum":"49f569121c5f09ca4e71bcfe4ec70ed86141c3d5","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9146a1d6437f9126cb42d382e970b07e17fa859c.tgz","fileCount":20,"unpackedSize":38167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk9oZCRA9TVsSAnZWagAAJRQP/1TUfvZ94dSp6gJ6/Y2Q\nSYpYu/E4+a8FQlilr6Riq/RLn7tfryOrOOMpddGwgKQjrE0ACJlj2mKpOSTu\n5fGXLAgwkPd0QspeK5EJQ3uLuTUNEx3fuE41icNKvpyUukmNiIhrzV5Liax3\nY0smnJIrhD82NJ6CU+wv64zFy7crNVE2anGImZWnhJIKYU9nvPhbVdBjg71o\n6+dvaCkCxwF3s/59adzJ5sVmAhLNs9ZbdqsJfg5x7Z2d27ukHZXnHD5t66Wd\nF/EIUSDV6SwY6qK4ttRfAJSXbyOa25sDonOVs4BaqWlKFmu+sLttIPw7s0ly\nilNzLic2eWGHZNo/UmbKiNniY2oqljui3DxF4QtjtSOE2pO9G9Qh1DiHEOJ3\n2KfMR6JmpwrXvf1CJAbbdtGWAbnwBZUDr1nf1vv7tvswPjkwHEXIYfeK0e7l\nFogx3ncmjP+azOmL4LIo5uvdZUZ5sIqT9q5V1BWOsPFrOyriESWiAyc8QSNB\nLdCgrd6/CUezbe/4TKOKKBgUIrXHxYLrOqVqcQY9Knt9C+PN5EMjEMpbvxZX\nE7ejEaarwukUBpjCEFV6e7YCnYbRGtuO9MIgYh9hI2GCx43yus2Eaucu832U\nhIAOy9Q6yuB57jkhue7rjgr7o2WB6ks5npBDaQWlhe3ulshJkJAPpzI2Cc4N\nlRFY\r\n=jlqr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCziMQCDKUDApvltJcZF72pJmxhuVHE+JiMtIjIu6k8QAIhAL7Wiq297tpeQgcvEEG55DLt8NOBqudTSTiW8RU//QnR"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9146a1d6437f9126cb42d382e970b07e17fa859c_1603525145212_0.6310693787939146"},"_hasShrinkwrap":false},"0.0.0-03acbea821f76192f1c94c7c967d4c6d83dda075":{"name":"react-image","version":"0.0.0-03acbea821f76192f1c94c7c967d4c6d83dda075","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.0","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.1","ts-loader":"8.0.6","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"03acbea821f76192f1c94c7c967d4c6d83dda075","_id":"react-image@0.0.0-03acbea821f76192f1c94c7c967d4c6d83dda075","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-VMgMWwIZolv0VtFEE5DmSfe8RGF+fHazybwYZkBvhGMZp0y3jhiFh51ZcaEoeJU6gw8ZfuPH8JhPJwkz0llO3Q==","shasum":"40128efbc23714376fc77149ec90fc66cb5538b1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-03acbea821f76192f1c94c7c967d4c6d83dda075.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk+MRCRA9TVsSAnZWagAAdJAQAIkgUuN/kXKGGOiiz4qa\nxhZgWZCRaj/477j7HeW6GV83NYeRJHXzmm20JHlmiSEUAqhcgzESouXXQhI5\nCyzLL9oMZbouhK/gpF/2NDiJkfVJLM1EynrGgUlnlJro77OB+Frt6ApfgxRv\n4Si3P1UmXViEUZFk+1BdT7WZgS5MlqDdlalss44lbB8ubi27rWfa05BAW/ix\ntwMiNfOTT9kBc8E2FQrzNmxS70xQO1lqjsx75F2P8CIT7L1TkerSmEArULa4\nLHvPR9MEUzR8PWXDi/sma5zMECcrkwZesj9pTuLc8yWI0L2uYrzGmw8TlpB5\nBFdsPx9dGd2IPwXb/YmU9RC3wHycPMWyeyHqb0nQzmkvf5vuxaU4nZg5HJXg\nPv9BY530LS5KxxcdN6ymge8r/YASrD2Lv6HsiNMgo/8KibojvE/dGXI1W/eX\n3Iy3jAPUfvHPohs5ivJAVZr/+COcVDlj14LfYC//3QmxG6cICnUU5Kiqtf8U\nXHK+iTnu7sVVAaITITqCCsk6GsNvL7qWFZlXFsIjmEbeCIFJRvjE6oRdT19s\n0P63gz8oo6TOabZZE6Mht0cCqD7J8Fbik52ZzSCg5brxeAqqW1rEYq8ZhZvv\n2txE0VJdWX3md6eJ7YsbSPl1fDhJv9bQ08IN3YhVNWOJfytg08lsOnkulzMF\nL8Gs\r\n=6wpR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+mDRKMy7n5xVpmiAbFgk6z+UmiQNStZHgSxobTKSxCgIgfmsJbTKRU9rdUcsgChzMPnxbTXErbcUtH4GK55d08HM="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-03acbea821f76192f1c94c7c967d4c6d83dda075_1603527441305_0.7046696341853655"},"_hasShrinkwrap":false},"0.0.0-ad871fe90d0ee9eabc6c6cd539b36684a496d99a":{"name":"react-image","version":"0.0.0-ad871fe90d0ee9eabc6c6cd539b36684a496d99a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.0","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.0","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.2","ts-loader":"8.0.6","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ad871fe90d0ee9eabc6c6cd539b36684a496d99a","_id":"react-image@0.0.0-ad871fe90d0ee9eabc6c6cd539b36684a496d99a","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-aDKWiQtQ1aren/iOG9UOpal9Fs5i2X12+JrNQ6lK/7zhCsyulRJwRgKBIVSALNJDMcCF5JpIIwMNAglLl2yc/Q==","shasum":"4eabd695fed42ea34d8046d188620e7759188244","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ad871fe90d0ee9eabc6c6cd539b36684a496d99a.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflVOICRA9TVsSAnZWagAAjJ0P/0EbPpZN3wX8/wa4dR1+\nh86Yqcb2azbDRn2KyTi2Z5ijvsn2QT6AlemIP67jCVS7J/gj3a0Hi6SnUp2z\nQ9j7Xz/RjJ4lRZnPu5wKWD7yZGDlKkzZuqKZhPspqj+a+aepTrODkKNLSwXm\nS+cpOZs2PqSl7tJ2h0HvRY82xCpBCb7SxlAH5dACR9m2m1mDPBpMinUYbPTB\n34tnoxUlumpSD+d8JKn/QYh7ebjsuw6cx6McLNE5Sz2lPkXTpyCiF6aLhFAb\nlS7qLWqoHxN8abhbGSAuy4C4oyVDks9/4jnwwbURvBDQNJWS+V4yfiTnvAya\nb/qr+d6QR/c+TnTtBzGjuMdOrfj6VNksebvOYpJiN6PZ7O7rNvmnvMmMKmvL\nQrojmW44kldcaJjBHxoFhDJnpH3b1iWjpGA2iQi9GLg5VaexS5sp56G1mXgS\n7whS+LvfNYVKEGGkf4uYLDcZ/y7DiS7Juoy/ilhq1E46enO3bpIYLGpZiwgP\nHSmJbiLkkxSqIK94AsjVFydmXFYodeX8bx//FpCg9w8XzSeGMRhDoEENUbP9\n/J+42a0pSDxwDSBpNASnMkSIJGDRjxPkVVvTWvAGuisbXoloq5BXvRxgaPmz\n5UOa5rK/v4XC2EDzf+Lu+4RnUxSNaU8/Msp0UudCztgXr/Qz+vM3cqKmLAJ8\nRiet\r\n=or1D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGFEahG5E1s87LTmoUjiUqVws1A2cWUvmaFVMopw8vu8AiEAu8To3XdG+SgBfk7egWD2/NFsBki4b8UwMUz743FGz4Q="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ad871fe90d0ee9eabc6c6cd539b36684a496d99a_1603621767984_0.36378190016442"},"_hasShrinkwrap":false},"0.0.0-3e238e537ec77500690045b6966bcbe4ed23bb37":{"name":"react-image","version":"0.0.0-3e238e537ec77500690045b6966bcbe4ed23bb37","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.2","ts-loader":"8.0.6","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3e238e537ec77500690045b6966bcbe4ed23bb37","_id":"react-image@0.0.0-3e238e537ec77500690045b6966bcbe4ed23bb37","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ipnJ6hCILmDOE7DUnSqtI+6NRoYPDzhifaiBdh2dCcOuusDUtCP3/Crf9pD4owpuHw7T8biHEaHIZ5CdGRrCYw==","shasum":"15c925f1c69b7a2bc122f7a0ba24f424c61f39dc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3e238e537ec77500690045b6966bcbe4ed23bb37.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflV5gCRA9TVsSAnZWagAAi74P+wTb14EFyyqqL9m2Vodo\nufJSO8ZwvtQAZcz1LfEwML/y/hgE48uDpp/mxzvjZgD4Ovh+V2gxTfrq1PP1\n03ztaBII1ng6spO3uI4xusnU7AN4gEDcskTP5WV/38htR3MSs3rripzXHurS\nWiWw/ozNiMEIA5Fce85SW+vP2Urki8ycP5+rD5mQHf9Z0Vbd9+3fP2fi6b3A\nsoyVn9U2GlGt6hg2aKedjb7D7/BaOr4OFmBLU8CLYtE4YaLl2ds9UPKktFAf\nkUUlqd343sF3Bvf/EWFD2ojsCBKqM8UhZYxVKE2wb7vdKXnpm13TNr13QDWO\n/JGirQskbavOT4QxZmDqqbo826w8k2mvrfi4bTJVeYSHwQYuObl/3yTsBK2a\nXG0aa0IZui/IElwJv3395m6gYoMdFw/zi3P+tBPOniUL4X7rJvbFRLW1qhPR\nKrXuFv9Cxf1h9SQ7E6K/17RkC3HAJo6VZVpyMCeEYaOpGgTojCG+OuJAGmnU\nb/MvD+FBIPGLaw5i0aJnsp0O0rA5gTb0HCl2ZXVjIH9JvYlTd3PgggjC6gwa\nHjCRjCmjRb5pH5fJl/x+ukMO+3SJGiAkCsPkQ2JaNw0Ch8tlk/yRR3vDZ+Bb\n6uz9/8QC3lMKxn4i5DToepbIeYg45esyU50Xdsuy5Qb5Z4DvZvzkTwuAWyhg\nIprm\r\n=xc1I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMrCl4G+iVdcYaeFZW/6+qecHqs64T6jknvSKFBbsO4AIgBP7or8Ilz10fFf7uKGBPJM+IzowTFEKLV69n9f7ABQ8="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3e238e537ec77500690045b6966bcbe4ed23bb37_1603624544505_0.7347122592929336"},"_hasShrinkwrap":false},"0.0.0-9629f2a9fb028e78dc00af1559d1116d2caaa10b":{"name":"react-image","version":"0.0.0-9629f2a9fb028e78dc00af1559d1116d2caaa10b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.2","ts-loader":"8.0.6","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9629f2a9fb028e78dc00af1559d1116d2caaa10b","_id":"react-image@0.0.0-9629f2a9fb028e78dc00af1559d1116d2caaa10b","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-K0VATOT7SXfGgKlIQRYOOmLuyObD2mXghSu9pqC1PESFNcbdZkCQB0U3v9P3S0bGs8oW6TrCZc2GJxK45Qq/fQ==","shasum":"cf1a7a8f9007b2a4e25c166270d410637d8883ee","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9629f2a9fb028e78dc00af1559d1116d2caaa10b.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfls23CRA9TVsSAnZWagAAIxcP/A9+Bf04qQsH9Do66aQF\nvinSSdrZ+2RZEn7pfponirTGJqPPPU2i3YU9i3mh2Ba7S2HMTxiP0m5Q66E1\n1BDqi59iujPodSM0yJ9NRDII5udhdrmi2uzpAH33JvKoyIPJs5JHmZT5dVAM\nQjt0BGmQRYp9nWs2etdVoeyKahCsG3jhvUJxcrt/bkdklOVlalHuhl9AaxIt\nF3FJKbPtBcLGotfBPZGJQu8fADLB1jtFisn5KRUOsZws/WAC3raias3OyrwC\niuwGhpgMxPBukO1Dn3A1RU1MGN0uWrF7UynJxaLTL8USjFukJpZbSb3w09w+\ncZr5ejpx5f40sZ1RemcDlX7Kruhr23DBnT3V3GUv3KSuZY+OpF6bxbEZrtXX\n/qqvpwNDyOiPRJrdYtZjJlG8GCHt8UN09wZLD9voB3GT4oMbTT8s89qgUpCe\nUcWOEXtDpLSeyoRl+Mg59ofkM+ezGP+k4vw06fXoMCvNy/hD4TgPF9K3ac52\nZaqwcR83gurE/YK1ay5TQbTrFbPyo6LxmeuSXZf1ZIfaFaACUjZtPj4a4TqM\njIYPwnM3RLHbAvFKzJyswF8iRLo5UlxmftC7noZUd8fphdLjaZNpiViNxd4u\ndYWQKSxYsxGHahok4S4/iDt/HUQKSfQTeGyggI641Ix2lj3gOoinqCtdc5qE\n+7Oe\r\n=qk8+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfb/mKGUeZsehFjxQLo10XHVABtDP5L6so1x0IIrDkAAiEAyemRdQIL/rasoVPbSgYlThNXqMiLLUHBVavWBOh+my8="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9629f2a9fb028e78dc00af1559d1116d2caaa10b_1603718583179_0.9072762240652565"},"_hasShrinkwrap":false},"0.0.0-c6b783385d5075e592873ea8be2dd378c4cf057c":{"name":"react-image","version":"0.0.0-c6b783385d5075e592873ea8be2dd378c4cf057c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.2","ts-loader":"8.0.7","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c6b783385d5075e592873ea8be2dd378c4cf057c","_id":"react-image@0.0.0-c6b783385d5075e592873ea8be2dd378c4cf057c","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-mA4nWAgKwqkJ53yOVf7Q7Zz6apvOAKudsbF6elt6NnAHovqD7wlHYPQfxHGrp9WN+/aXgfQ2dgVoQPN697ctpg==","shasum":"897d580e1fb2a8a1f915b9339f8aba7b923a86bc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c6b783385d5075e592873ea8be2dd378c4cf057c.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfltsdCRA9TVsSAnZWagAAe2YP/1dC6eZqXy+WPeLWIrv/\npW22MFKtFkDNl3jt5ZrerhtAj/VzORYCcFcFct3fHi8P9tobkNvSiRFFMnkP\nX3wUpYohziF+1JlarKYfpUas+YQIeOCjD2T/LmncIvszBNzBjM6pA3b4KnxT\nV93LsVwZVJau1bE2FJNSPRB9OHClD92fKWy1RSi4gahedi9sVbLqALS6nOmO\nTN9MmmneyM23O2J9PbG3eNUrxJL38k7EwtIh5NWOCqQ6x54JljLAVJ6VrZ+j\nmCmiGW8VdR7TzQ2N8vNCD1Pcm9fSciVsawn52bMM+qlfmZKtVyJBm+nKmmr9\ngDj+jJ8iXt+Mj4kHz8jL0PAlvBo+IxS0H6zeKidpt15RGhiJIa5dcWqqJ6Qg\nZ6X3FzBjL+VrlQt41id2HkDOhRQ/JAjljxGA7KtZoAUF9o97iFNCbe6sHBBJ\nBE67gUZcek9pJMq4e7EGipuwrL55CjbfiNo6zTwTDQ0tKBgM5XFYn55QTdvp\nfhVwe7NWVOd377mEXC2xkAP2OZINWOJLWOj2njlzIrglJ4/jjHqUpWFm4CAz\nWyObjBeFAlXE6KpgjlIEpdBBhJQH8ABo0VU/6HSEbw95lKuG8xXDfeZ9HUt6\nilCFB87Wi1DtOYuDaA5j5E7irDbzPIbLqxLKHe8YQfnXiyMIx9N8pb6YcCwH\nWnBy\r\n=hyLL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICuYMuOuC4FET5Ffmd2+E7pyM8E2Gp34cVbB55d08WILAiEAiGIHswPo4b94NDn5eO9e3nB/nZgM7pa2ADC/QmQxLsg="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c6b783385d5075e592873ea8be2dd378c4cf057c_1603722013495_0.4419317393711033"},"_hasShrinkwrap":false},"0.0.0-99d87cbcb1c6e968a4d194501b6d45f7be18f383":{"name":"react-image","version":"0.0.0-99d87cbcb1c6e968a4d194501b6d45f7be18f383","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.8","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"99d87cbcb1c6e968a4d194501b6d45f7be18f383","_id":"react-image@0.0.0-99d87cbcb1c6e968a4d194501b6d45f7be18f383","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-6gWm0z10H8JevmNzjPwGaKybcHo2kpVcwiO2QPLZGWkKYkNNlkmFjhtK0pypO7QtGr8e98ueGC9DnZF0LlWf3w==","shasum":"9e0262fcecd588adb10f83e382396b50fe862549","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-99d87cbcb1c6e968a4d194501b6d45f7be18f383.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmK1+CRA9TVsSAnZWagAAW/IP/2daLJn4YL20ZpY95dDS\nK+Z29NfSJrk8KS1c/Tm/8pHsrVwebEYoaporvUkpoMvPz0xCKJ4eXJCuqMtk\ngyNd9KEshrPnKgq1dATdKOTFKFfVfVaqW9Ps7ByWR3iYCTbAuppZ4wIeHcJm\nEWBt9IbhwM3xi7W6wPIUzpnYQYNi/R6NLsFfgwdiniTwgzty0ch4gntw+Mcw\n6ue6PEqC+wiTveh+cb5G7vtgQwcBBSqfqWUqHkZrRp/BTHJxbtoMCE50+SR4\n5BzXfLBVQAfhJs3OwFjvnpQDZaCUlj+ilClR/Dz0Id8vKCbDtU8I5rd0Ro9l\nhCirFGis2JbfmWxaofBRh6SsxZbw0o37sdAjXgeZe5JDaHkO/vfxa1KjXj5V\nA4BriujKEqyB1Y+aucMpoj4aDkKHNe5fw8PaAUEpCcorRSL3Sa1xpoL9qGGW\nCGVCMWMnd82CfKS/dUad3DSo4RiNAuLe7X1BvM9fmNXMYBnaXthmKxDDedyl\n4OdRACLiLMQxbUvvpKUxCu+j0Hedq4ewEi7IH2sI/gZ1B+9uJSzlWpaKdDoF\n4d2nlozXH0Kf+HNeZPWdxi1AN4M2MqkHed+yVp5j182RsWQfaiWBZNZJAwKa\ngLTFAoIH13LGHPNhZvJ8RayFbtzib0d81YyVsLYQfN5e1ws/PTk1a2sW/rBG\n6Qgj\r\n=9BTI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg3EqkjtrjsomI1CfrWfonOrQ8HSHuzmsqUx+/G1JQIwIhAJK/0eWwzdoZ96DwVLY8OwkV+7Vu+N+je+vAW9aIldFN"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-99d87cbcb1c6e968a4d194501b6d45f7be18f383_1603841406097_0.5240607641371733"},"_hasShrinkwrap":false},"0.0.0-7ca39f79ff04d93dffbecc1a7e08fcde65671b71":{"name":"react-image","version":"0.0.0-7ca39f79ff04d93dffbecc1a7e08fcde65671b71","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7ca39f79ff04d93dffbecc1a7e08fcde65671b71","_id":"react-image@0.0.0-7ca39f79ff04d93dffbecc1a7e08fcde65671b71","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-T7DQULoM2MuYTX8wymYegRhKFdz/Ey6iP1c6R6ewu/sgt5xOxP2jjajOsS3mGNl+Xky3ZtE3C32TmmXC2EYYfg==","shasum":"78148dbf0897a114f94d0d2985de4ae2b458a53c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7ca39f79ff04d93dffbecc1a7e08fcde65671b71.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmhx7CRA9TVsSAnZWagAAAc4P/1dooS87wgmmDnYKFaTn\nwdSLO9zAV6qtL+XqkGrWu3KGKhB4YsKFMGepaPtJ/XBoKYP65ukBhyCcwBui\npgQxVBBrJ0E3mLveMrEyfosFKrSgpAlIVLj0mQhmieUCn8OK9q2AFH5WmJPJ\nuds06R2+98UftUA14x3gHiIK2rqMM6IxHHM6rGIOrhFQP927DxTTE+9o4JBB\nvb6lLgfXXM01P36mt1KcDiUT6fzFk19yXmdYKcUwvQhZn2uvyOGN8clIC5Gl\nyR0t+p4olLrNDBnwiqj+1cUfgqbwTi9hYVbtIF08CA/jYSHtZcxx5MiSGSKu\nzqQnO4aFS8FpL8Rfgwh6Nasq3XiqM7e3gJXw3r3PDDDeuvgr8gGh2RWaNvvN\nlhWqkWzyh8i32P6VDHnuyZ+vXTSyvmNJL+xJMIHoppzhUi7uDbtpinDUcpXX\nph8y8bJ3AXIJKeDTHjrjrxZizS1Y/0sJaZFAL0dlAkoAqE9IocY1JdgpO/Vg\nXQPKyxgxwcV5LN1fonr9rl/bsjAKpGhZxoeJMLefNbLhVNz0eoAaPQuHub8F\ndSlOaDCZS5Ri6i59gLX5A1Z74dVQucG5cXquE1goJF6DideO9JbAcDXeDzjJ\nFSUJchq3dYYfJeHzcRqMPu+LDlVJ0YKVVCtZRFpQK0ZmSFQJ0z48LGYajI7G\n39Ii\r\n=v8n3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH9eeXfwGpVV0FKyA2eMujE3zaJ5RNo4/Y1vhdg52AEcAiAw4w5tnzPy/OBVQ8GFgK4Uz41DHSSq3jSNxbm9qnJdMg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7ca39f79ff04d93dffbecc1a7e08fcde65671b71_1603935354717_0.7121141886431297"},"_hasShrinkwrap":false},"0.0.0-6a7cc8cc5212311446d9cc7989cfe45b5f42a8c1":{"name":"react-image","version":"0.0.0-6a7cc8cc5212311446d9cc7989cfe45b5f42a8c1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.53","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6a7cc8cc5212311446d9cc7989cfe45b5f42a8c1","_id":"react-image@0.0.0-6a7cc8cc5212311446d9cc7989cfe45b5f42a8c1","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-D1ccAc45QkyUVN4CaVnGDJCOSaeDlSctAkGgUBsrSbYQt3I6eHg78omOCVlM5Zo+uXbBsXHqeqsc6f1H+V9nDw==","shasum":"4b35b2a29e7247904bc9f32bd683f4f59e82d21d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6a7cc8cc5212311446d9cc7989cfe45b5f42a8c1.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmi9ACRA9TVsSAnZWagAApIcP/3CR+T0c/xROzZXJjs8I\nmy1A3wlzaBHHdlHwXs8VCYeyw9BKuF94fVo3PPi9zoGtPPbmPhOcECYln9xT\n9ROd0U2n5C6oNWX1ePh8CSjTEUjV3gfx6A11Pud55B8N9blVHX3EZae8XPEx\nZQQSHVslpCw10x5dtp8gPdkH2nVEjjdjZrRXJ9u1shCI3mfafaKwDsLJEXIC\nyHcVevPcYBIvNstfEpVe+snUAYMVVpAdItURIkkU3WlL1f09TQGd/YOEORAW\nZe4fI+qpr9wvJe0rGBmnxFmYf1h/YvcwlSKenSjWS+yu/xxb31Fiy0hgzmZw\n7slSIZ0zxEao5CaEg19RSPhhtNh0FHR9XGLQm8pNQTk5ITDaG9ugdK76qedR\nD9dO9m6g0HxWlIQcutzw9BZlib8EgbFSJzGafZM6ulgX4ckoSji17J/5eEpp\nv9HBI5z4oaKt0P+kE3eEYTaXbLCezaOXqX3e/IbxWyN3Ltj91N0OX89eBBUG\nCAfdItBygxV8SRMNnVbLgcRWnDOVIkY2YrMd3J3bfx29rgrHEqIH1aXCh1EF\nP6kJTxPLOLdfq/Qt2s6HIcostR1DhkWD343csQF0OwouOKZHABK3Pw/89TWr\nXb4XLZgoh9LfdDyidHXovYYp5O59CqNnTISe0sISILEADwAKT5013Q2o8UHC\nYkXf\r\n=97dm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9ikiqZ+kSWKjqe9A/PSs8CI4UJIRQGIG8tnyLCdSFCwIhAO5QHMmZSTHHKXYg6eftABH8Z9x9ppFNU0Vvwq6TuGuS"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6a7cc8cc5212311446d9cc7989cfe45b5f42a8c1_1603940159453_0.979909855520906"},"_hasShrinkwrap":false},"0.0.0-f21e30b9cbbf912256b26f1dbabd596e809474a7":{"name":"react-image","version":"0.0.0-f21e30b9cbbf912256b26f1dbabd596e809474a7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.55","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.2.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f21e30b9cbbf912256b26f1dbabd596e809474a7","_id":"react-image@0.0.0-f21e30b9cbbf912256b26f1dbabd596e809474a7","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-0L4pjZQyxmf1znNBUBxBGQithlocW6FVBBYGZTWijLeRcOs6636bMeuxD6AtxcG8H2tODR3Ahgoe5L1MtCqmmg==","shasum":"ff1b4c3d12113da8737abb8cbe76e7c2d0929ea2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f21e30b9cbbf912256b26f1dbabd596e809474a7.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfm5HkCRA9TVsSAnZWagAAU/8P/0dCKgW2WfoER8obzQg4\nFBf1QhUILh28wuA5QPA5RdwzSbZQbXGUrpZW+0sbS4XlYHl3BTeAAP4xTgOB\n2q/C4MR3KAe/Ypjy4ihIcd4S3129TFiImKG0Ya9Y7fN1J83K88CVcQ8TA+KP\nE/PQ94PU8kmFsBd4axOEVuSclSl+gkyawH+A/X6c/dKT2KWhO5HsXvCGCn/W\nXuiDXMMh68NN5JEvX6AO3x87cf15mkPwwBZRJWawSu2qqVqeOqAf2PgBA+ae\nOYJ5TyzukRsiOYAjc2ofrX1KkLwmJXD/BYzHfdcOhYzfZ6piQxCa2OCmRLAv\nzllJNMaro8PXnuqGGmQ5zLAR8wHvkBTxY57tO8OLAlscyW1S3DQ/HC8nCcOq\nC3Yok4jmsGCM4euaOL4p+1G7VCi1mjcaygRF0cZdaT319pqC266+UsYDc5Lr\nGa6HsMndZaZziJorUtUUiprnQChLcKdm96qZw51bNd4TsAzfEbAMoMtRWqpM\nvCqi0oz2IWlgPMpqYIswnshKOqAiuFq5UbRmQqIyypjnc91U8lBdB7MQFkE2\nB7OUUdXNY2AGvJCpVheuTgmG/hgcVouVIvYmhtUNi6Ynw5yeSfCCswUSyO/M\nvIZvCXc4hcyFOPCyLNBJ7u9KHNBr7FFl4Qpr3OkiWNN09FgFURcF0FjhJPuz\nVi3x\r\n=0yUX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQ78zUO7/0OrqMWx5OMSFwLCr8kXaVmJWsAEdNq+ZV1AiBMTL6x553dfchjuVqOOI4WVvjMrDy+ykH+fRMBL0wCBw=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f21e30b9cbbf912256b26f1dbabd596e809474a7_1604030948034_0.2969373229493104"},"_hasShrinkwrap":false},"0.0.0-5885992cd3707762a9db304986b4702e5959c76f":{"name":"react-image","version":"0.0.0-5885992cd3707762a9db304986b4702e5959c76f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.55","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.32.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.3.2","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5885992cd3707762a9db304986b4702e5959c76f","_id":"react-image@0.0.0-5885992cd3707762a9db304986b4702e5959c76f","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-P20uGYqKJ1xNuXB72SEByOwnoGx+r57SAi8UPnt3o93vqE393KfXyw2lHCb6EFG27MXRgoMK3Wui/VUJaIfRMg==","shasum":"cf715300e31421d7f7637360f6350e68aa8377de","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5885992cd3707762a9db304986b4702e5959c76f.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnQPbCRA9TVsSAnZWagAAQDwP/RWwtmoTtrHTro/Cd1hE\nw0v5e62BEz7Vs1Ag3Lw/R0SAPiLpduZKPMUuumTmKoOvos1CHVdtlY+IukoB\naEyLZ4CBXnIbPMljp/vumMi65A97hl6GTHLrn3Eif3hmhwl/AHUhJIesPhuP\nJqEc0rTiizLQsFS3y4pXqZ2uHHvSmi9TobUD1jbyLBFpvamQh5wQ5LZM7pez\n0lzRWe2bxvTrGSoZD8aBgmYFZjP5Ty7AwGccpDh/4fUKWBLCmUx12HR6aHLu\nybwWTnroeTZ3eviXnH3nC7AcOSTZCiZl/9eVf2X6XxWm7QiZDWpOtwJ2HGdQ\nKYWDXvo1Fk0EpwWSZijfmqTY2sbgHMQm/HY0/8j7Zpk/DMeyReNUQJRav65V\nmYOAKYGZWL4eq4HStv+sq3E8eeWZ5oXJaUn5qCxnAzoJ06MJsahdHnTe+CUq\ns1ejITc3kVcUxO2vcfN748/prijWVY21fVLDvys17e/GuW08+/Wt+g+x/2az\nnJL79NdR44m1Ue0s0JC23mjsRuIX4JKg9uLXN9mJkQaXJ9xvtsuQNR0FNHvd\nVk3qQppSuftvAuN1Me4qWaFMYjWa2x1xHlvLnKG5mbxIE8o9TT7Ec7Vrq28v\nQPhErMlS7vE0J//abj5A9oSxuOR6ri71fmOLYqwZoLlgERO1tp5lRZAjjWg7\ndrHq\r\n=t4Bd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZNNz3uZOkffnbQ8sSdR2/OTWfW56ZH9zjxJXi2tzDpwIhAMX00WeKa6WK/fQ9U7ImF4uL2PLKXtwEprkZ9GREj/SF"}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5885992cd3707762a9db304986b4702e5959c76f_1604125658816_0.24254001947127546"},"_hasShrinkwrap":false},"0.0.0-2d1b4e8e49bcbeffb295649bcb5fa0b9f3e17d85":{"name":"react-image","version":"0.0.0-2d1b4e8e49bcbeffb295649bcb5fa0b9f3e17d85","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.55","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.0","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.3.2","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2d1b4e8e49bcbeffb295649bcb5fa0b9f3e17d85","_id":"react-image@0.0.0-2d1b4e8e49bcbeffb295649bcb5fa0b9f3e17d85","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-I5qEBdJhMpKvRv1qKxz0KYz70zLBdlxAH1grtMqpLpXpundgk903vhWdQCfazuxIoJhQNOgPAnA48UkP2GCT9w==","shasum":"9bd1e5847e9e8abe9477cb40af5cb17421433163","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2d1b4e8e49bcbeffb295649bcb5fa0b9f3e17d85.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoS2QCRA9TVsSAnZWagAAZOcQAIz4gB0PMX9r4g2W1nbu\nSIRz9S10SVVllqDUqvNLli+j0HTMJtZS4R5EHFHEZL0dPqYDuT+kD+jAD5XM\nKCPvUPTgFSzEXfEI1GAfeh9s/akwq3IbiIVaXmQ7CAXzi6comfVZQU+dD5d5\n0ss5YtbzL3DPb6VonkA9HvKScffeb6kIC3h+MENMMCHLkay6AsiLxmVZUqu6\nu87CvNis5XbDp5BAn8ZOzUwYjBKdDAyDI+G2nd7DRYIVnyF8cLtfy4RA4RAq\ngck8P8INtQkHw5o5FFCvZdmpLR+sUCicdtKTd8BQMmhU3eV+990d5Q2bYawd\nKRMWDQcW754HOAsjcXCS3FMvCoYP2y97mCTCMD0tADHVU6lEgKp7cmIpF+4j\nVaZxQlvZqm5i+ToQdo8RWvi+886bED2Ff3zoHyqGm5ny6dvR4oqHwmC5gMjO\no6DsB6/tRX90+WGnTmpBaKLKyU/hFp2Iq1rTlDuSG5GR4+FkIpADiEBlO6Dm\n9xBlGIEFQIepMYQa47jeBbtlQXu6fzNQdzNH0i6E6BPP3SH6nPpDCYefn2mD\nrFLl7nQ3Ir8xoG2RFD073iYLdzdApuHswhMNFnD9P52+1f2WYPrDS7rVc2XF\nNCBlc/FKQm7ssWSmemOgXSrdkVL9DHaEXrDmntHGOg8CycD+eQVGLL14mvgB\nmETs\r\n=pVy2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1MhoTUp90/TPxEBfQiANQ/9rArml1cTlQgzyF+LfYLAiA++VemkM8yTNc4eK+P+N8hpEDTUR7eXYjBm523PrRgOg=="}]},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2d1b4e8e49bcbeffb295649bcb5fa0b9f3e17d85_1604398479572_0.34503575510052253"},"_hasShrinkwrap":false},"0.0.0-4b5edfab96f28f4a73bf830ca941caad03edf479":{"name":"react-image","version":"0.0.0-4b5edfab96f28f4a73bf830ca941caad03edf479","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.1","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.1","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.55","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.3.2","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4b5edfab96f28f4a73bf830ca941caad03edf479","_id":"react-image@0.0.0-4b5edfab96f28f4a73bf830ca941caad03edf479","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-BVPIEokVRppjhS8SEgHfob8iulgcicawb8ZsPnjUvAK9/yLnJU4Mjd5kSWiWZLYGfDGUr43x+O7sl7O6MowrAw==","shasum":"2d100a6a642077a4f50a159118a6343914bf7718","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4b5edfab96f28f4a73bf830ca941caad03edf479.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfou/vCRA9TVsSAnZWagAA7oEP/RQI71kxqzcG/Q5dKd80\nMIqdAmDVYjmAy1lPZMg6b7/B5TApwfGWacQijnjnwvdeuBBYAi93NwNkHtkH\nPHtM6p+oalusOOMw3YGkioWX8wC/pSkFTM5iVc1BB69+ULiPFPP9/oyrAeA1\niRf6/n4IfXi8Nfw3TtCggnZLKxYU0ZPPJG4tjoyRFMZuikySX01xYx3agpYb\nyKC1QoAcCAFavnk+u245V3iSeW18EhRFv+FznzPlaqHhjvbGUR0apLNbDiYq\nUlCPcIpr4qPTHk87DrsP9SzgxPL6ne7fv+q9l1TVzwsjpK5M0OZcDfhEd9f6\nzM5Q7kQk9vnPav0tPeNf2P4tTz1btJDciqcIdA+83murY3kECwD+cdSXnk3J\nB4t6YU0fYr02jP51ZyCMB4gt6atIoK3w36KN1mAxfoTJ9fHDHRFbtRXG7lO9\nwuVr3hUt/f6TX572t1dyQw/vzPQ3pVkOIUsa6JsepP3CpG0xTiSlin6tA1Rr\ng1wPBwn6QX1o58ToUiB6XR3p27Y2NM503irmS5SitI98xdSijTa7qzKbsrpm\nAblncpsN00NQINcn9Jtl2g2ApCwrR0wLmyzrxtybuMQ2ArNzz5Z4HKUiLBJV\nQOMZCKA7mQnlj6AJ6eu0pJ869lKiPINsJpmy01myrCR9eGoFSE2CGPXsEr7p\nDJhf\r\n=kyev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGm4E3LVdWfE5G1huMaluWpKSu9y5+UIpvbAULE16utsAiEA+zuIQiiawuilnEvOEbfXfu4srNqjCnCsT1e8BD0CdG0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4b5edfab96f28f4a73bf830ca941caad03edf479_1604513774212_0.6101704374512142"},"_hasShrinkwrap":false},"0.0.0-dcd37652be28aed2b0c33cc11f3e7b2366a00875":{"name":"react-image","version":"0.0.0-dcd37652be28aed2b0c33cc11f3e7b2366a00875","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.0","@types/jest":"26.0.15","@types/react":"16.9.55","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.3.2","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"dcd37652be28aed2b0c33cc11f3e7b2366a00875","_id":"react-image@0.0.0-dcd37652be28aed2b0c33cc11f3e7b2366a00875","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-8+4ckgVWi+pNKrnZWVDnEYEoR6RXeVj8M3ViPJjo3TNgkBj4nlsT54901Cm22ih0NiHWpGFFWlHfrizM50CuUQ==","shasum":"427f2418e849fa113c0bd3f2cd6eb806e257f273","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-dcd37652be28aed2b0c33cc11f3e7b2366a00875.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpGP9CRA9TVsSAnZWagAAjyEP/R3GMnLHz2feGjkqhQ6S\nbJadYD+abt+aUnywcliWKyGQn8m29L0bL4gZ7Ms7AFsBnLxOBSmengHqi/94\nW4zqFi9xQBverab8r59jlwgb59DRBJNYnDwpfHNwg4ZHOH2e1WDkfob1P1Wz\npLLjd4pQWuRnU7fd6ASS9S27JyvdsbeVQEWSp67hayW3CTR/n1ADqKWLfCOl\nQeck71OyBsUm8UmFs/wKN/D/SCrOeDPQIiQ8pFrj9yiK5IUJ+4d/VRWAD2g6\nsiWGmI3yO51fzu+KfEBgOqxxMaO7aERBURiLdrkWXYVN7WKQv63oIwYxp6im\n0yMwQRn+W4vKR+PYYXfUB0NQT+in4p9+uZlcCSVfdIsNyH0rOyznCbrpxlEN\nzzGMHRWdeTD8gQkUSVTwdDOVcgDQrJbqMW/We+dYT3RWVCwV64GaIBxWmRdf\njfoc9GFzeswrVHlYPSxI0Mf6iKodqWYNFtHiTy5+26iitViawcpuQinIlCkA\nP+YAsNbB3XJLFb6m9339ul576+dwh5uWs6mbRbyKSz44X4y/bdunW3GTfoWB\neDvlMp5MHJsUHSUvGdmnqIJFOZiDnYfvV+Eag/5hSbjcL9pjVEsELCPr+2hn\n7RNKVa7F/Ep+9hLMoNgFOWtPMRnvUm3SXylzTxsO6PHenYTqrLHuZ1smw9gt\nC+5T\r\n=CxVm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID26ZObx825suahUOo5jrWiBybCmytpDh3SGt64ngTpVAiEA/vlwKb7K/s+sART4Q/cJD5iMx7+iRBq2PwwbTerY3u0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-dcd37652be28aed2b0c33cc11f3e7b2366a00875_1604609021397_0.22427594920049332"},"_hasShrinkwrap":false},"0.0.0-5e29482bb11a4d56943e8437361409c4ac7b73e2":{"name":"react-image","version":"0.0.0-5e29482bb11a4d56943e8437361409c4ac7b73e2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.55","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.7","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.3.2","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5e29482bb11a4d56943e8437361409c4ac7b73e2","_id":"react-image@0.0.0-5e29482bb11a4d56943e8437361409c4ac7b73e2","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-5S0c18E5jTiNP41JN9TADsNgLYD041wah+PfwRR5Ii86UV8tMdOffmNX0seZ+Kofi7v+EXR5yxIyNKqnW+zQOQ==","shasum":"7d92f9ce2cec818c37dc61105b55962df5037c5a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5e29482bb11a4d56943e8437361409c4ac7b73e2.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpHV+CRA9TVsSAnZWagAAzl0QAKKFeJH8umlZCs6bBJHZ\ncZL5pYHQNCBd/j5IZ1tZWnUAgNg5ChxC+Tmb1ir9m2yV/Q6KYT5h6ykPrD1m\nrDM0oqpyzVyWrKBG37U1EOm+jv2uTNxDkpXUIRJtg2Z5bbE5wEQtCWhKSpvr\nQy8Sg/6/OBU7NFJyWS5mVMxoYUCPlmZWldsu8ehtaEn+SX6AoiWel4yHSsDZ\nhZ6jam/bZwJ5xFUGxFWcEUwDSYDr3UZqWiiRfxn33ms8h8nd8aFhxQJSeDt1\nbyCqJg1/U82a1gyXNiHzcDiosqW4B2Npix8EI27dNKA/t0MKeFHJWykTFawr\nCQ2zajyOf84uGeJ/RXZhLJp7vMYsJJY8Uzn5M0XEiFIf3DFnjY8ZgrIJ3hKy\n8VleQBJ87XCBX5N96RKg2HxxmeIHBkjAmjjK4OzdcoaVLsORxt2sAtraFIqd\nFtIbrZM5DQ3ONyc909LdEFd7++J5ziTu4rbJdOTGH1vBVuBe1eIPV2BSxW25\nF9ubTs+9qgX+UD4K8ICRxz3FM9R9RXsMVQV1tBQ2yOwpgaN6M20isYNI636D\nTux0knKfR+td520xSos4WtoO+gOGGNgqBT6m3MaFBL+sBxN5jI+cWsew1/7k\nN7E4Qo26c1rYkKCVwofjImIGWoftPkvCYr1Rd7JyyB2TgiK0M3fiW8yWP5cz\nY3ih\r\n=GmfK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfh+6s7eDZ0+odSaYAZWG65m2xdFbD9Q96V9bsBZIKSAIhAOCqYpmMRWZx4NIn3YjJJ6RvBtWFJVQrJk+xI7Y9XfB+"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5e29482bb11a4d56943e8437361409c4ac7b73e2_1604613501978_0.4100060562566892"},"_hasShrinkwrap":false},"0.0.0-b2b45881e56ab2d92796f6839ef4f77f7cdaa81e":{"name":"react-image","version":"0.0.0-b2b45881e56ab2d92796f6839ef4f77f7cdaa81e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.55","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.9","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.3.2","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b2b45881e56ab2d92796f6839ef4f77f7cdaa81e","_id":"react-image@0.0.0-b2b45881e56ab2d92796f6839ef4f77f7cdaa81e","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-9n4hPILmeoAglfi6bP/d4rq96BrShoAA/z61i/yR+rAHLPKdyxZvVImjxYi0BoW62S9dXapG5xz8MnbW+mM9eg==","shasum":"714ab083996c6a77bab60e47e930b8d73d440be8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b2b45881e56ab2d92796f6839ef4f77f7cdaa81e.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpd3wCRA9TVsSAnZWagAAbHIP/2+Q8P2Pm17xL4q1zkuB\njf2Oyt79yYoi1s4T6uoE6nRuFgj8EqPKJGU/hS4jpGJQiUjuu1iRWrrkSh1u\nVR67MMhOC8ho411SbduykEBK9pnB0VR2bPsn4qmFmLfypzusKJsTrg3cT4Hr\n22a2faVVvPh60bVkYb0A8ARSybGv0+UZKqHbNeWXKu4LfkAdX+UUXmTg8Fjn\nkE9uazcqPpFkvtuhJNQqf0tvB5w3yvMCPt3ojm4dHmHX1kv7txz0rT/FYz1P\nwtVvnq3a/aML3hQQzzGtB2jlhKd40oPH+/e1MBJA5i/b6NjaRcgSJt4X5tYq\nCCvs1EfrhnczPuIfc0j6kOBNMBWqT/wNrjyENzU4iWaulHlMzZQR7C2nHDLT\n6uepFFjW+n/7MPly9UBzk2+5vCxdBGemsDkLHwImjCfyKfQxss82uh33Lfbm\n1BEmZVtSjgmo4Wi2I0SgQnpYqZYQ7tdrB0xvIJRta0ni2B/yz4HG4i/MBCoh\nyydE/yfwIaS0CCkiJXF9UZEcHhPEMM+BeMqEq60HVjzuJPs7psp8TUMEf2C7\n17FM06m4A3tjMBTOpkypKqp0ay0v0CR9AqG0lPtrb9MU6PbtRn4ExmP/L47p\nBVtg7vUXotgk5CMNwGNCPidcb55FnU5kmdm0KjK2PxU10ri8IFarWOlgAUxX\nvDFT\r\n=YDoR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7C1bGTqubsem2V+eHvcUXNZ6FN9TpbwOKPhgXdz5BigIhAP1/gmVpvYDu6SidJx27SNza6xXJnigzK4aMaP9vrueQ"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b2b45881e56ab2d92796f6839ef4f77f7cdaa81e_1604705775988_0.1141182899615294"},"_hasShrinkwrap":false},"0.0.0-42ff4eefd5f4c007ddd8f515de72aedf6f55074b":{"name":"react-image","version":"0.0.0-42ff4eefd5f4c007ddd8f515de72aedf6f55074b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.55","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.9","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"42ff4eefd5f4c007ddd8f515de72aedf6f55074b","_id":"react-image@0.0.0-42ff4eefd5f4c007ddd8f515de72aedf6f55074b","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-KQdLbGY4zZEuJ+K+FBSzmGFSseFM7jNUqngyZtK7lWCUn7TyfupaF3C88DW5Dwnwi88BqJcvk/ouhTPpKNd8iA==","shasum":"61e86066ad440500c54a557e5d8ee8e1542298e0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-42ff4eefd5f4c007ddd8f515de72aedf6f55074b.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpfAtCRA9TVsSAnZWagAAOFwP/j6YfhS2w/+vO1yCcJEV\nLNT5BEKQeZ+Cn3g6RJeEv0FLYh4yCBzLPmKSIFlX/L0w5QXcF+1xjSS0yQ1h\nfcjKLa2zbcVGu0KZWUOasgXiqlF5/toXxXlBGkQoWQO4LDkWBxOsG0ak/S9y\nA0AghBfybS8mMzNWu+W5a6ktX4cpxeUJMG4ly8RkkBF6aiJg9eppgeTyKeeu\nCYgQZkQhhEEinX+l9QUVio8hnysdI7L6FG6q8V81nQWmeTMI4KLek4uXW6fy\nTh+vNHuN63T/iC70dPgFXgpO7kNGZSSk3j5FY0ao3YVpvH0FBsiNuLdEFVWT\nhlFCtgXZJNrhUfGMByDp4kAjeOe0FWUuqyIEF8HNNrK06Ck548KNQQLNUFmD\nTy5hhX1eMEczTioKn1VO4WjqkRETSKQanB27EOpccztVzIAszFHsuBQdUzjx\nBoc+rIaNGa9EGyu5BoZMNinHHJQ0/QzTNjEt3HhGzDQ1rz1areI0UrTCLzsW\n89GSUf8OB1DsHv1EUO0OYQ0qja1g6rCXw4SQBd6ay20Zd4qR9q6vJDcIiBLW\ncHCsfO6kflNmTNhq6cdXLoZyriJlhtZZPeI6nO2sToBIkoUkp6j+wC3moMfV\nWxhn4547c+HMhEO1XHWYAa8Qlb3/wnz2ZM1ozcxCIpCYsX/Wwr4dU/f2zhBw\ncNMW\r\n=Q/9R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmXZpdqgx1kqom8CKJEbS0OxeYzo1CjotUn8P/bTi/vAiEAnLIG1frpS/YRg5vECMIh0V3fSOz4pq6pZ3wl6Q/ZPSk="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-42ff4eefd5f4c007ddd8f515de72aedf6f55074b_1604710444552_0.019728313609693293"},"_hasShrinkwrap":false},"0.0.0-6bc9cb25ec58f65398ba3f4e1e70df154594c835":{"name":"react-image","version":"0.0.0-6bc9cb25ec58f65398ba3f4e1e70df154594c835","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.9","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.1.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6bc9cb25ec58f65398ba3f4e1e70df154594c835","_id":"react-image@0.0.0-6bc9cb25ec58f65398ba3f4e1e70df154594c835","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Lnn93+az1kln3+S6sEUt7fwc5FYjLgMfY9TeWYW+FpXHRLLfTnN6ftrgBZmpkKIIK27Mj5taxfH//s4jbsXLTw==","shasum":"85ca74bb52d4d60e646085bd702ad4388e7a4519","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6bc9cb25ec58f65398ba3f4e1e70df154594c835.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfp1xjCRA9TVsSAnZWagAAPosQAJiFUiUx2kCMsBAVtC0s\njJYfEoGNk5xrOH5ZFlro0ZXsHhDtYpnYlGnMYu6ezf4GA4i/WwkOjrTqtUE/\nYv7p4FSxM1eBkqNDkCmyix68kBG6T1SGsEd5aeSnO3mKKd9JwgWLVhYPa1r/\nUvuJLTW4+Kqrjd2xDrgfpKocbZekOm1WFxEdZXwKSJ4E9wDd+3DHTPlbqKCO\n9EjicVrAsnKsoiYtDnJ31mAUnRNC+QOhEcq1sPmA+3q5gFDVCelnPqCPZm62\nduWERoYw8SN9w+/2n1J3IqEdTYosD0IQ2rJm+/BuVRlv/bW2zqYb4x9uejmP\ndljDUHODc91PZXUQg8f6uKEFXQC9dLQyCuXSmA25y81Yc+Iai3XciF6HtQbF\nfhGpiDI5syGIZOjdMiAqGUV2dg+ib1B00VQhUli0JqUTdkIKrAeJJ0z9I1Kz\nUmp0Y9SPrEq6oUKWViH7qJ1nEj9a/qZGApvX80DMY+zXCnScY6ujOBtHNJK8\n3we6HfxC8NhcuqnZ4Aekq90JLcbxivew+I2AKSSgTYvV9WBCtSLt88N1kaUp\nNKmfRGblyeX+3lY+j8o4qlsk5Xj90hIztyaw92L/EOy1Md+KF8N9eNFPjoGa\n5nyWUi+oJJeY9D95x4nW3ffjQUZ6flttv10sh8zdQOCk5EHTUKlYlpbz4FKu\nckCQ\r\n=bozR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGF9zKQRWviTEZ9ZgWmdLe2euUsvOH1qxiHTGUCquE3CAiAjZCHNLjX32jyFJxB7lbCiYctUko5SEExXk51IsZY3yQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6bc9cb25ec58f65398ba3f4e1e70df154594c835_1604803683384_0.39921358177604427"},"_hasShrinkwrap":false},"0.0.0-a60514118d61b05939ab0076ddf570828a4db124":{"name":"react-image","version":"0.0.0-a60514118d61b05939ab0076ddf570828a4db124","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.9","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a60514118d61b05939ab0076ddf570828a4db124","_id":"react-image@0.0.0-a60514118d61b05939ab0076ddf570828a4db124","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-R+0ZTIve3mIaa6oLN5FS4jAF9LFLgEc6HUKhNGU5VWrZMyWkK8MOb6Gc27ZTZFOaeegwK8AWvKQJxbum/vr74A==","shasum":"ce1bc93edb2da5d287318fb83e73dc98f43739c8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a60514118d61b05939ab0076ddf570828a4db124.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfp2xKCRA9TVsSAnZWagAAbFkP/jI/o3z9lI3lkRKJmIgB\nbUrn6vaZMruKggksFgX9GkOm/8cYSqVXEWhUywND2ekWi26mnqk+e9C0y1x4\nN+7q1hKeCE3F0YtA2gWdqS73kQJWfHGBJL+phwi6QT4ALRSN6vEA+wJf0h2+\nrL+E3OwX6wPFtKV67ttBroq9mynnN9s6Ys2Qh6FWRYVLQVZHitcoZweGLojG\ncCmhHOxITorjZOpVczTAIvfhzwkTUnIdvAYkJhWXzYryxu76AP4dJpBJIVcP\nfbch0y0tJVdYQd2xNtm47NwFCkvsHSdfPpNo7giIcQfYRemIIml0syMI/flQ\nLKHJHM2naYrWt/80dWDA1Rd4bqnE+gV3Ya+/uMbwWgRTQrmwXYV/JfyXaCgK\nZYAe5uyPmgvXdX5p5p0DwHK5Of2Uy33CHFnsTgWXDCZCfidKaJUEp6Vgw29A\nVFvepEbxK4NZicb1M383lSxC+E+JFOfxqh6iIbH/r/Ee56rQRfhoxidMGZ5q\n3Xh05I+c5KgZetfga+nWvxEuW7XHCZosDbFd1K06yt3LHt4FvGyUgkkrCOPi\n7CGr3RKDpdhX2MQmdJPNs4u4C+cfxOzUFn49ruOUPi+qslBJCYO53wmdAnRq\npizDxFjda1XrZYCHnj3pV6lCs4M7bBA/WQfsWHkeo4iKjTkflnA3wKHLsVNg\n2skT\r\n=ymrx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbrKLZouqOWUCPbrHob56PeVr6UK36xsLcOl3qcHtpJAiBPKZ0onr9/UBEYQRN93RUYW7gIBWWZctIlBOiu62aOvg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a60514118d61b05939ab0076ddf570828a4db124_1604807754176_0.3879014155984273"},"_hasShrinkwrap":false},"0.0.0-cf3df3eba47c9537e5aacd9b273bc92ab298770a":{"name":"react-image","version":"0.0.0-cf3df3eba47c9537e5aacd9b273bc92ab298770a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.1","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.1","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.10","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cf3df3eba47c9537e5aacd9b273bc92ab298770a","_id":"react-image@0.0.0-cf3df3eba47c9537e5aacd9b273bc92ab298770a","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-SwJ/iVooDoRjHxxCsvYYQaZjQ6UPffS8JFlCtQ38ZInHx+bEK4GOb3NocS+ZsjY2hJjzmxa6oyOYEl+vhNf7ug==","shasum":"ae64bae539c59284f0495f59fb2cc30a5aa36c35","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cf3df3eba47c9537e5aacd9b273bc92ab298770a.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqNh9CRA9TVsSAnZWagAArM4P/0W/Z4DR/M5SLipdYK/j\nwi+eJmr4Jy/tmQ4/TzNB3MwNCJE41Lr3bd5ekoPpk2lkInlpRbjSSkRXH3/M\nExZxlelBAz/suuyMAPb193vAPLYo8KVQMVSgvWswCv5p/YTy66gED9XBuv6n\nGUq5fGq1zxnB+e+yF5mtYh6/kaRp7r1PXZ2VrzcR3MfOI8R3QLXCS0UUft5g\nGY/xsmOkINxHlnNwrlRCCJ2oj6agKLn0SQIgJSl9tf8t35nn+9c555vFnLu8\numaHjOX0CaVQqECqIwWy6cRqJpadUO3Bvf/AxFxJcCRtiCXFJ9XWkqFZ81j9\nv6kx2Tpaj4rZBKxZwPDl8FKWJo8oei9Oz20m/LfeG+KitDexQc47Aq6RdmgH\nOsPEjPyLIjyjIi2SSb2nY8yfT8lQCfNR/cGU2FHRnpFs5oZGetiUDn8QpAFW\nEpV3iI4ddDEmuQq7XP1NWzEbS47f8kkDpAkqp2S/HVmaeqh7pTs9mfWTKUxL\n9zHjtYq/HLIpNfRzbsY3wJ3pDcp74s9xWGhMtgy/QrkTfZfnXx6MuPuOVT9H\n7h0ot0GUK6/qF7J17pZ0yP/+s0hbv4My3S/pa9VmejSYe4Pm6yFaCLVy743N\naVdkcMqJ7GJifIIgx6StHzvLYCk4HlnbVQ7V2dPvWhSKMuPjhMvxLLSwcFgd\no0Ty\r\n=GQxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDScjoN5siRZQI5H4TzR5g/3vXGZ26TCWn0BXmiFZVcaAiEAxSI1Ps4afIq7oHA6VJfovKSFJYUDL2k5mMPoL4uzWn0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cf3df3eba47c9537e5aacd9b273bc92ab298770a_1604900989159_0.6800481235835218"},"_hasShrinkwrap":false},"0.0.0-ac7df026e8a7fc077c85fb7977855da51ebd4c36":{"name":"react-image","version":"0.0.0-ac7df026e8a7fc077c85fb7977855da51ebd4c36","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.3","ts-loader":"8.0.10","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ac7df026e8a7fc077c85fb7977855da51ebd4c36","_id":"react-image@0.0.0-ac7df026e8a7fc077c85fb7977855da51ebd4c36","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-KVLae8bnJEwP7svXd09kg5KRMJBGOzUeB8yd8XaNCZIMsrrjIv6HAhd7sJetsZKze+u76MbXLGg3XaCN88NAlw==","shasum":"98755bfa67950dd8d3ffa9b81972e1f2687128f7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ac7df026e8a7fc077c85fb7977855da51ebd4c36.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqN4+CRA9TVsSAnZWagAA7XwP/jf4cVn0wSbIxpYQmFhQ\nU69GCXZjtovDVG28bCj4B9oB0apx5sdXZpji9AgHVTPey+/fAaf5vO5w9gVs\nWDkrOUhk5TZ8PWJA4i0gUmXe1YEk8CsYQE9E3MHXZWKQ1ugr+85lojatBb5/\nUybEoNiTgUvJGzMlmaYv3G8k1PjQymB3LCl6y9qENbbCtM0dIZr26HdMyOav\nSY/etgFiSOTI295064A8/i3q7r9g0QGq1uNztB60QOZSO7UZp330Gj4sxE5V\nBVStwSFO5eIUKwm7W77sq+plQL7Mf2IqyZTgGOzdW3H8rZ7jzKvQYNZ4OC86\nwugCOwLTfH5XVFRigiL9nVaCENNjmYc5HOBohYfrGBdrzhb3tkvQCLM9tLbT\nsn31QU+mkTwC24wwiQpO14oY6onFkOuxZVPHn4jYzMZpI5b72Tel/qObIH1o\ns+shHEY2e5yh2rQTQZG+DMPkmDonEEhWO4GhKgnqtn5ACnvyGvRzM9AN81g4\nwWVO9GpFFY1FnTZlGwJIfl4e/FnmlSj8WGCsv0zs/ulewf+Qw+ddpxtKJDfi\nkYpxEZQcaKPYXILuTXJQg/j7D+MDFz65KRm+51FwcgvNwOahiSD+D4OcpGGP\nNYERbNJ9PQ+OqrtjvPej2N3G2YU8k/zylzvuWw0u2Qnn5HQkXqDK/GcJRuoD\nNBTJ\r\n=RZru\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoD0mWwjfeFEbRQRG2x6E+cx0MR/Ptbb2xotS2EIMCHAiBQJxcbGI6F10BGB4XKBf8ZzmAz4skignu8c5OSZSBGpA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ac7df026e8a7fc077c85fb7977855da51ebd4c36_1604902462170_0.36635272158944576"},"_hasShrinkwrap":false},"0.0.0-b7b925e95fa092c146ca140283e083c2d7bd2bb0":{"name":"react-image","version":"0.0.0-b7b925e95fa092c146ca140283e083c2d7bd2bb0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.10","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b7b925e95fa092c146ca140283e083c2d7bd2bb0","_id":"react-image@0.0.0-b7b925e95fa092c146ca140283e083c2d7bd2bb0","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Xl++AWSQ9GwSYwJ378jmcNLqT3VWdCJm3LYiSFIqvGY+oc1sQu2gj72J2etU7mpp+ZzoWT/AypE9XO4RjynzkA==","shasum":"df7dc910862960222fa53a44b62e7784a994c8b1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b7b925e95fa092c146ca140283e083c2d7bd2bb0.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqlEnCRA9TVsSAnZWagAAKUkP/0aRQBOjfcqmzFQznzbD\nF7rnZ45akVZ9HrgBG0HGV8RgBnBueJjYBxqnnNncjzk7E56dPlmGiyAxAjDs\nMWt2oSTn34UlbWpRZ5LCDJ9TZzuALpzK0MoOiZwiKa+Z0zEhfqPDmG5CBagG\nf4X2TniCOXoRt0+RlbL9ogXx1dTEUlFYoO3c8eZYVLjfhoUeyhpWo9KoOItc\n6DRUZ8NPFuCcIESNRP51IUSakhM/vA4tNLidYmz+KXEqCnQ0FuaFtPS/MeLa\nOlVjFjMHgH1TMEwdcCVo0nUSEH0JFk3Nn19kAnt+0GZHEJg6TSdJKzl7dLLE\n2fSVIUq7s3KzzCAiPBJm+dkJVRQn0TR5L3h12hhvyWmF2Np6/vKt0JDxvY5n\nIOPwjXKx5kfod4T8jSfi8KFho5PDwNPKuf1zXFQCiPKg1246TpHNL6s7ikM2\nA52W5TQCMcxfAAaQ0x2gsHKb5Qaxx/MA6Bxem7E4zZMKrQnVJY+MG0H5gjQI\nQhTM024Co+ZXW9YMaG4/u9aIYlWRNaPU4j3lkcK0s6qDwP8ALXmT5ZKwzVWe\nlLU6C6NhbQTaC0k1tqz5EN+nDIvGL/V7rRNyoWLEa2KkYSNfew2PL2wihaBI\nnL+kxJ/AcOsFDH13+kJuqDTpgJ7sWtoECbRuSXR5ZJbHZKp5ABmpcNQp/7hx\nI+lS\r\n=YVIr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkiISigvlWV8pNOcJr8rf5IX5/y0eB3PWoyU/yAOP0YgIhAJW4tSqT/MXAWRucsrwMDLKDuhemFiiPZohK5i5ol/VU"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b7b925e95fa092c146ca140283e083c2d7bd2bb0_1604997415320_0.1136779427917387"},"_hasShrinkwrap":false},"0.0.0-9c4eda6523537986e87778e9e39664b67eb3e844":{"name":"react-image","version":"0.0.0-9c4eda6523537986e87778e9e39664b67eb3e844","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9c4eda6523537986e87778e9e39664b67eb3e844","_id":"react-image@0.0.0-9c4eda6523537986e87778e9e39664b67eb3e844","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-F25mG+J/54RC0eRmeDudzhGSwnNesFvUUPIo+xlL/RE3Q03anY1u6ItXhAvCayD5byWKWCAAmtpO85ysWiC0TA==","shasum":"b126fcb0aafde1bf4e82fb11a1ae12c919733423","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9c4eda6523537986e87778e9e39664b67eb3e844.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq7NECRA9TVsSAnZWagAA7mEP/itQyKXDl81qtYqGbvKG\nZYWf+c6AqYQl9FGFqJo/ExYbYSkvD/zoFBTFOielrY+59hp5ma2SmJSqIltG\nkPeERGIGIzkoSx9B/CXiRdnD3wd8eN6mL0bXnp/P2wdmkled52SwaY6PIlQL\nHeVz++0CKXOghl4LILMaMlZ01NhptRy3hLdJfBY6oMZEN+ul8yP7i1qw6/V5\n7TUiKQ73juK4m9erwm3tAdKDXo9s5rb5PdeXNO5HDQBDswWJvfYM8T9RYkLn\nOA7EdewB905Bz42V+k63ACIbX9F7lu7ihxSNBk56KhkFIyBkfP1fW3T69hgE\n3mZmYg9qmWRn7Aht9tPfR+KtQ3C/lQ9zP6YlQRLeZBhotnaCSBeKQgotNu2q\nC87lHM2A41Rfgoc+pO/Y4pmrnUHlxXvZsvpmrACpRtzOxklGS5/EXdFNunLA\np9Gz+e6CE3lE5eSa2bXOKF6fW2OmFuOXfZHtVInyGIn+D7+pVLYV3US5ddgT\nRiAtm0isWnG5lsPFnDLKoQrBKrBBlV3FMUbq2e58rYsPpfvMDXBueDr/swJ4\nCbUT9jNLh1+b1WpRQbew1aC9AT9q4kOA9pZc+PNrghUceVOiMpdlhgYu4X02\nKqQM7DKaA54+qCgW7qT4nBsqXhrOWkt8sg03SQci0vjSD+g4xNUDZcBVNvHI\nRHAH\r\n=YWuG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+Lw8a56u2M89sjVXvIk0f/Q5SH1NIujnVWxNrGV+BXQIhAL0w9p3yudIKYFDx1/kkxw2/7bLF4B23mi4ihD3alfat"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9c4eda6523537986e87778e9e39664b67eb3e844_1605088068052_0.6518297010141572"},"_hasShrinkwrap":false},"0.0.0-59bc105c0bd5b31e49d48e73f3198af0975fcfb0":{"name":"react-image","version":"0.0.0-59bc105c0bd5b31e49d48e73f3198af0975fcfb0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.2","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.1.0","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"59bc105c0bd5b31e49d48e73f3198af0975fcfb0","_id":"react-image@0.0.0-59bc105c0bd5b31e49d48e73f3198af0975fcfb0","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-aVL96urVJGuIBvhKJqdu/iQAOWU0xIp3AmtiUENzOd6P0csLA4QUth2qH1S5A1YcKO60GASrH8x+QTld6pv4rw==","shasum":"6ed566d770cbae24f29cca3e5fdb1aadb388a793","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-59bc105c0bd5b31e49d48e73f3198af0975fcfb0.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrSIACRA9TVsSAnZWagAAMcYP/2xeG1Xxr3ITxgP/OZhK\ndcrd/wYmsA9dPInr5WsBx/lW5W524CJ0RUKJIWZ5oXWOpDUcGNgdUoAhCupG\nkZpCNtr5nPwabfcz50jGa8EGQvA9hVWjtoLD++sNJk5AwLsGrBbqe3W3G+lO\n6GPNYBT369HcVnHDyPwruzKuqYsrp/F4Kl+KSO2e9MBc8CPmcIGSu86WfUrZ\nmblp6JlFWluH4nwQbd/EjnMjNDaMuUvr6umXwaJTkYs2mnY534b83D2eX5sa\njvrFvarGy5D2Q5r0HravcN6GmnqFU5jF7Viu8EOmU74CCcPMHIFrVEjUD0gs\nWuBLoJSdW38DkzdMMdbMMwMlj6SNNCv8PWflgTGxAhBWMhr0NfYjVrLzr0mO\nJyxbyYwzPl/F8zuqa1EKWZRzIYIH8yqz1Dgp/Pqc3pSjokIZ2aO9YhoBCNVk\nJk0MIomGDurZYJPkmZBuZ4lNc29BlyfvwamPuGlpxR1dUFjBOe0GbxB6eKO6\nkmmi/NeQ3Xn2reoiutF2d2l3pAwETYGWcg6esnY8YDTtjxF9jebGhC2kwC42\nrqbAPwDpAnaS2x+amA3bQO6DanvueGdiSWGpRISVh4huved5Duq/e3OmkUdZ\nJBQ0EEWSt9X3Hu+OuFvZhYaWsaVPnT0vHmfIHnCXvwCSAWLLa/CRsEexJ4Lt\n7Ib9\r\n=0Xxe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFG8pt7Zn6dU4B/8zTPFMY82wtnqRZt8KqkrXKwFRh3bAiBKptC+P97BzRdHH/jaUU3mE2/MPjMVNPkQcOzMUWAKig=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-59bc105c0bd5b31e49d48e73f3198af0975fcfb0_1605181952449_0.48452997470464165"},"_hasShrinkwrap":false},"0.0.0-b4d0d2b14b4e4c2d4a2e201c130172146c8f170e":{"name":"react-image","version":"0.0.0-b4d0d2b14b4e4c2d4a2e201c130172146c8f170e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.2","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b4d0d2b14b4e4c2d4a2e201c130172146c8f170e","_id":"react-image@0.0.0-b4d0d2b14b4e4c2d4a2e201c130172146c8f170e","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-zjvZxJ91YTMLfsG+jmJZlyZSSXgc5krmkzv0uDk2X+UAHFNn+J3BoR8K1eYIWq0X1lXs1hYLs4AuJnv32eO11w==","shasum":"2722e15d2bff35d7e8da015f3b945c527a044323","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b4d0d2b14b4e4c2d4a2e201c130172146c8f170e.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrTExCRA9TVsSAnZWagAAE4wP/j6fZ/9WvQUE0bGH5G4s\n92dIWDWYv++8fV9Pp6Te7wIdJtH7j8nWd4KmX/kQOH2JJkPMMh1aQEccs7Rg\n1fRsOUECn/qT1erC3ImGqBT6Q2+x3nrvCwVlMiV7n6yxnlC65zZl6ogAgjVb\nKhiTETF503iLpxJwSqFsAazrg7KSBrbHo4FkXrdGUqrMb4SpXbVycBb1Ci5F\nmRrC/eRUXYgLUmPGUFTWIuIPzIJAoU5sqCVZ6x4CD4UVQOie/ylSNQHVctZx\nuuFtJS0xpQC3Jn/Q6TRb0AHP3Q6iYicTbTYpYSuoVxumniTn0NPjd8QGMN1X\nPq4jtKJLlSb1mfO0I56Ttn5VBS4dBfAzWG9PppLpXA18XO0kbZNPOaz0caYE\nmGr26Ul+Qyu3B38nnQlaweIShvMkUbCzP1j5a73XB+oORbVLh9CByLxWEh0v\nJ0W4TUHRg5liPhaVBCuAS68Qiilpe9zkgDFUzqWL8A/EggKd2LEUj/jaVMqU\n77KcJ2nL0iyoavkG/pccVMaxUcW51EBv2Ym7h5dYt8mHHHtMGNT73EQZ2B48\n0lG01HSy6rxuh8a7ax3a4f3jmNeV6hV7M4PfL13zqLYW9ol8Q+owmuvpVOml\nFeeYiInqUwvxt3QzfIe03HYW9Ujv4Rmg4RWb8MlPxYUGGPn+7hlIvQcbdllL\n3Tht\r\n=Y302\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBssw8SlrYDT0681DmOnM0PKnNCzK3KrrDXZk2MPKY/+AiAKG5FNz+HiGl+a1/RTiPuW2EvC77ttDAJcJSOCqHC01A=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b4d0d2b14b4e4c2d4a2e201c130172146c8f170e_1605185840859_0.17844537816257922"},"_hasShrinkwrap":false},"0.0.0-94b60e7e52b56bd382cb8249770180e78bf65d01":{"name":"react-image","version":"0.0.0-94b60e7e52b56bd382cb8249770180e78bf65d01","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.2","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"94b60e7e52b56bd382cb8249770180e78bf65d01","_id":"react-image@0.0.0-94b60e7e52b56bd382cb8249770180e78bf65d01","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-x4cqES4Vvg3Joh4OpaUPQI6qbGQHWEO9JX59SL6twOx/8yzRblNugrvocPgpivE3bsIORi/AHy1BHgOAa8kZRg==","shasum":"d03bd990bca313023bb615f277b2e53be5965bc7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-94b60e7e52b56bd382cb8249770180e78bf65d01.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsXLaCRA9TVsSAnZWagAAIN4P/RYfPNO0XDXIvStfXjcd\n9j82cy6aGt0cbOZgMb5xZxw4t6qEWh/U/ucGZHCgLlKOgGsy/Kppd03AZAhH\nhODs8vAPud6VQblK9jpr+HcNyKGDjvBTjuOv7BEjylAI2xSkaM9PpB8GMVaJ\nGHpRDbEzzMRnRYclD+b6IJ/PrcxYckthW90ebb5iB2KpLUnvcNDRNBKVAzzV\nePTfL9n1Jyf1Gxx7pbnrKpWsnLH8p9kKvUvH5uHbRy+oG+CCi/ZrQQ+zBRpx\nvx4/VX7MZdwwcrjuVQGPDM6K3m3Fe9qoQ/G2IqsF60c+jGHhZIhtFjBoBgkp\neKdOiDMeDzQFURBW+9wvakVT+fsiFtzjv5OYZ9zPQg3p8UIXVw59RSYka38d\n4A+WykgWn8ZX6Brt8v0NpysIrlSlNRniv6h40vNYKwwMR3H3f49Vx+M/w5qO\ndh6+agId7ZF4UYACQGFMG4AbzbhUT2+rP7QYi2Lr5dfSQNzVGAXj8ZV00FZR\nMK8O0vOqHPD8DXdMu0QEmLSgjsGZDyEbzfFcm/dHsHz9Ox1L6wVilqG+R0Uk\nFXdjyfXJVgV5Fuq+Rb4fEmYBvXKjVDDGqLeZ8hfBthvV1Iky4oKGJ6TtICan\ni4vn6X039oKNvTI9aY3hhEM79gQTnBhz3+2ogBaw4+QsXDkHzJA0CONcf+tW\nntSj\r\n=NemD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgAQcK3paDHXIPvrxw1klMK0JRlAd1daiuRwfX5/JXLgIgQ2zj3CIrXLlmgbBwC3v8PJRmT77YkwIc4Rqo8Y5ANtI="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-94b60e7e52b56bd382cb8249770180e78bf65d01_1605464794201_0.4239002031692798"},"_hasShrinkwrap":false},"0.0.0-002604046859a44c925b40c33ac719096aabe56c":{"name":"react-image","version":"0.0.0-002604046859a44c925b40c33ac719096aabe56c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.1.2","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"002604046859a44c925b40c33ac719096aabe56c","_id":"react-image@0.0.0-002604046859a44c925b40c33ac719096aabe56c","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-eB0P6VBpIL/Tf9m+9tSmAqXG84sWnw7M/SFlVxOnaKKgkpqkdW1ipnFzzn63GWSI5HVoUmJ6wxTu+fb5zU/K0A==","shasum":"e71b6b8a27b794f33c5421624f7ac7e3f4386782","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-002604046859a44c925b40c33ac719096aabe56c.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfti+vCRA9TVsSAnZWagAATmkP/29jn2y+H5Q5DEUpD8he\npEh6NTR8pMrEEVHPM5/PoB6WwhiBb1rkuCgdUuxkOH1DpwYQUSgkRX4GShjf\nGEqF3O5oAPesCdwqnfAhM46Q+VBC7PQ6VVaEqP+4fY7KlIW2CgHsAIjC0Km+\nY7crLH6AAkDr9LBrq8hzZjjIYG71fN9iAdKyNm551qQqI/loPxa3ebELOKrE\nsPgy50yb+lq9qJj83/xR8LD1jUv3AII1CJzYFeGigY0+oL7KHiI5XxaRcnUw\nlPi2AfcE38mr+0ylxn3SBCT6WQpIdpCmNeJo0+anGLCVop7yLobIOHBwtKy6\niqBrJ2U49RAmC+QGD5+cnzpj9Ato66XCM3AMqSrDcr0ZEvMhtTsQTLt5LtoR\neQaHl6sjFhGfzwqxqsY1H/QNGFutSchbe69YOGZIu5pPmLsiu3XyzEig73ju\nvIgd6YmUddBdSEUl6AVn1fdMCh7yeMM0Tp5KodAOdxObpdLX+CmxDQ15cFz9\nspdhnGruAqIaHOnX5/I+OFGnc9aQMiDb1lki6XQvStOjk5Dvr0FiioRZ977n\nksQWlxPK0vgwYwndY5aKj03i1Y9gkmHuVaD7U3D1DVu1YwvU5OlOhTc03Ks0\n4mM+ilrFZ/OH9JWD6KkSQhjPk26CQXQzvCbpM2swfu/7MMbtTFTq8hsruI3m\nSv5H\r\n=ZKI6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD93/6zdSSfHG9FTDc8TFBx7Ybu2FR7DAW1DQLc1pJ09AIgDB3WqPtdHosurNgiTaRhDUjU4IxUuhaPrREk2Zy3h9Q="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-002604046859a44c925b40c33ac719096aabe56c_1605775279140_0.03766076931279061"},"_hasShrinkwrap":false},"0.0.0-d558ce44788c145a1dcdba08d65e5e3f488a3ca3":{"name":"react-image","version":"0.0.0-d558ce44788c145a1dcdba08d65e5e3f488a3ca3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.2.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.1.2","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d558ce44788c145a1dcdba08d65e5e3f488a3ca3","_id":"react-image@0.0.0-d558ce44788c145a1dcdba08d65e5e3f488a3ca3","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-DoHiE5dVmGcy8A1jnQhMvs7LGocAlrmC/Nhem68EWGqsFEz5aRX4V9gu4YPYAudOBK3R1bM1ZOy8IZFg/EN+hA==","shasum":"1805820a1be32516483812733fa03cca3d195fdd","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d558ce44788c145a1dcdba08d65e5e3f488a3ca3.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJft7ZvCRA9TVsSAnZWagAAx+sP/jNpLDmClU7LwYs25ywp\n3gXZjAp0By1vtmLUQh0OqpghMJu86bs4f+jFKzG2Ag1A1aSFp5Fb2fxXieIA\n4rd0qR5RFDGub55msp71JRv40rl4F3oC0CdRhDGPxM7QgYWA4ItepUtIG4ps\n/OE7sdAy3N6FKMrCnqN9NdLhYl3zJWU4hoBjeN5vIvhXDqM9AA2cAhm8Nt2S\n0Q69QobFo0jn19RSeHeIel273xKjdoVjN6T/rAnPbjuuQTN9+sS7LodbUpZB\n0ri6XWx6rpbq/ACFpB81HLplFnj+g2cVvZKODjMmyve6G4vnVBpZ6/2YosQp\nns9PDtG/m/XNx/8FNWWq49FoB8oqshvFhaWFWuOoe1IsIqje3OwmIz/pCptP\n6UOumiHvygbzE0ZEU8AE9ik5gbVFLsaxP/DRkBitUK5RT8OHzS/7LF47pdI2\n+MUEP4hmR2vI02JWwFMIDe3XC2p7Dv/wQ5tbsYIBJ+6/es3LS8YjMsDDzGV3\n30/xM3TipB60siqysb5679MxK5hNIXiyAtQdIIRQsLJy9Mj45ASpd1yEMWbj\nrV43E5EzVhTzm1N0xGhfHuS7+nbrCT5lrWBlOFqusjpiBEJVlPbrbfNTRcs3\nmrcyo4U3DNQcPR87Gq/3AbhH1ZsUZEHXmK7PJnIrgo5fX3CgVy76I7FfahUn\ne7A+\r\n=c9Lp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXLLDLA6I7Ij/378Bt+kcWBPabJTBPaPP+Nu90qKDRMgIhANqYeuGg0sHb9lKuxCFxZcM8gOKJdhRVhcwKSjLf0hJo"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d558ce44788c145a1dcdba08d65e5e3f488a3ca3_1605875310798_0.8813969324646194"},"_hasShrinkwrap":false},"0.0.0-10d85d9efc9b70147619ea7d1cc4cc99c0436975":{"name":"react-image","version":"0.0.0-10d85d9efc9b70147619ea7d1cc4cc99c0436975","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.2.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.0.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"10d85d9efc9b70147619ea7d1cc4cc99c0436975","_id":"react-image@0.0.0-10d85d9efc9b70147619ea7d1cc4cc99c0436975","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-qijNiVKPiZsrrBVkYcoaJ3SQiM1W5RVx+QY7sqJQDe5wcJe/cnikyMm5BPs/OAeMkjSkpHIfrnfi9AYNwHCh1g==","shasum":"838dbfdc8896e862aa941698e9dd15d3f0fdf83a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-10d85d9efc9b70147619ea7d1cc4cc99c0436975.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuSkwCRA9TVsSAnZWagAAg2UQAIFsJIBKa57/igtoTIbY\nVn0CQQM5hkNWBm3O002BF5Elm4bt3bJkHc7BPMFZftNY8npkTlkzvmGi6XwJ\n5oHRoVVf3+acTQ6aPuiV7btmEMBDT2iqzP8vCpXmtZgPEdhJoHBr7SHmX87q\nN2Dd8QiBsgGIOQ0CPexNSxS+tYIm3KE2t54+HpYC6aBdcfldokwFnkPO0nWL\nlkEcL4cbyY3lpuFcvgk3dvqGTLxk2RWLy1XHLQM4I3ZwxfxkHoTjZCxj2Lj0\nWbH5gP9W9RI1H+fIzgnz1teZ/kkyiM06yb8XTskP8N88K185RhHOx8OsbOqn\nG1leFfG13yQ8kZnJr0OpZx4m6VTmLIw6fhxk0q33bbA/mdAr7zN3cn9M84Wu\n+s2bc61g7kYsGLvNCyqd04JGPFA580NduzHq+r7yJqel9xGsdvE8muaPKEUX\n1oHGSUE40Vg6+Ze5egNU6JmFh3C893gwyHHH3w9ENSDbq77aDZ2lNHl0aoeT\nzJn3uTinLaXBiBslAud5TOrRys99J0ak6TWpldq6r0yvSVhGuH9LrPIkPUAC\n6SxVAdkCM6vbP1httG+ujOlu8IxwZFkmRTHATuUpOAls6ViTilZD6SXz1Sko\naTf/YH2YonUl4AVvEDZlMYC62VyaScTDsegKZS1Rp8CYzFma5rCQCSk1dfpR\n3tnA\r\n=QuEl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV3kDAEzFxxnhBqjuMp9M2iuOaxfXz3yskHBv5Ak/NYwIgbIrOXE9KfeSU9ZMm8M5ZNPI5fYpPRqIJXxESKs+9boc="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-10d85d9efc9b70147619ea7d1cc4cc99c0436975_1605970223526_0.8120536406346524"},"_hasShrinkwrap":false},"0.0.0-d4ed046a80b7ab82767e36327cea438c121459ba":{"name":"react-image","version":"0.0.0-d4ed046a80b7ab82767e36327cea438c121459ba","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.1","@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.1","@babel/preset-react":"7.12.5","@babel/preset-typescript":"7.12.1","@babel/runtime":"7.12.5","@testing-library/react":"11.2.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d4ed046a80b7ab82767e36327cea438c121459ba","_id":"react-image@0.0.0-d4ed046a80b7ab82767e36327cea438c121459ba","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-/FaT/xGEIBIr4YcmNwWMnZcF+PnBh3GuihVzszGtz8urW0by/VAtr8uOtTKwK2MaXmvTP1Ja7bf79sE/d97bAw==","shasum":"7178bafef8689b3952a9ba7e1114786fcf794546","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d4ed046a80b7ab82767e36327cea438c121459ba.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuTZ4CRA9TVsSAnZWagAAWbsQAJoWUnpSMOiLv5bRU21M\n6j5jeW1Ic3W/JPYTLOUD1k6ApSQ9kmgYaEpZc8yrd/HVNKIJIw4Wv9pW0Sz4\n/pd9a1Fj++RbC/hSOTj489ViZ9ZMIru+Oi7sOmTiIP2ab+87X1UhYHrpnbwV\nGtvoOmsve3/f43uDH+I6dYcvjSd3eAA2z1rakjv1WsPrVuLuQsDewv8FgPn0\ng2otk6fpXXG8sHo07RZ1a5E5BnqRCwde4O8JuAkz0h643E1yZPb6idovCM+z\nhUF74vhkDAGpCcUJYi2n8GSiBn7Xld8kVo4m0dphxXj+O2nOg/DQIoA9tJgb\nuGNsBesYhiusq6zhcQg5Kuu1dyDblWUrKgMsY8vKQ5iRxDZwJMGxOWbahOWt\npRb4QQX0W5VzBVQqksiojams2rFUf8KBx0aXHLpj3qmQa/c4V9v5mHVndscQ\n31RawZ85T7K9WJdsxWfpJ8tJSJjbkv3AR2Bcl+tArUPCmB4MPj4i66+mwopH\nsP8D0uRoWKGf6uQeevKJln5k5kRiQOHOZ7elWye6CA8a1kTCP72CA+fxKdM4\netIEcqSpK6/RctDiUI0J2l5Ro7djAe3AcEm3i+mdG5xaE1OchFEwXNrZfeXc\nyCFv9aimVZJsorXVrQVsKT3UqS8HhMmAyVHVCApQfnvEL7hEmvUCfsobfgVj\nuns7\r\n=VEOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmOWbAeNfkKrZBU75tzrVXS71oK0Ml4oyzTf3hAGfK1AIhAJ+NjMCU/TG+4jh1bIpgmnLsNhlLJ3WqGgq0lGVzNMTX"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d4ed046a80b7ab82767e36327cea438c121459ba_1605973623512_0.26619677729227886"},"_hasShrinkwrap":false},"0.0.0-4721a6dbfafd4a654f50455c32b513b9840b83c5":{"name":"react-image","version":"0.0.0-4721a6dbfafd4a654f50455c32b513b9840b83c5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.7","@babel/core":"7.12.7","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.1","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4721a6dbfafd4a654f50455c32b513b9840b83c5","_id":"react-image@0.0.0-4721a6dbfafd4a654f50455c32b513b9840b83c5","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Y0bFMfeTF+Cc+SqYvX0hQoFRcuu8MPnFWnWZ5cUzojag8CAiEQ3baFATmbghWe7WkEu0mwEWOMt6dgW/Hw595Q==","shasum":"fa337a4d61adc0dcbffcd6c5f07f6894e8ac78bc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4721a6dbfafd4a654f50455c32b513b9840b83c5.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuqIYCRA9TVsSAnZWagAAIKIP/RCXGjp4Ydv7QeKRiFTj\nKXC/wsBeFkI9XiizxM3tJdUfigOjRpLCb/EYMxtx/FqsaOrXE/cOw41KOUnQ\nTgCOYg8ixZNdtfZCV1tSTXMJiF+B7QZzrHwe2QRqYMizzPlfhlD6+pi4ua7z\nZ5AnkZOkq1unRAlXSNLf6h0R/lleheHlgzvnC1vWKFYIJypyclTqac/rKY70\nK/KoDZcNWa/uNOmnQL+u4wIrSa1wTQ+y/+zyj75FXrtJzU9FzunMAsKuxfeF\nHNgZkdGcigbu3zeRVoP3mS91jAHLBnEeT29pBE1tBf0j2xRxMi0tK5x3wR7l\n7xSTp7iGPUP6bYaYYkdHTxKKNeMhdlA2ejMKgzvU5Dic+9olzO9nK98t/n1R\n/GXxAaeR2UGYmcvKxqc3RkQsT90D6SO1700UTAGKXdM3udY95Jyh1Xb3qi+/\nceqMfmQwMT05K4caa4ZDGs9pq8hoK4eA8wx+ysPXwrMAnIMFor8yzFGbkw6J\njhxmT7k2uzFN6lv5vPaiIvQMazFX3jL0qvniPkjI5tPk8+zhQXeoBxNzLBJ1\n7FeWSGSzmPPNSWYSpGbycMso5CgfAK0ZjMkw8ot0lZrMZuYZtVHQ7DfdJTC5\n2Q576gIAEIzur/0AVURO8SayWfRn0PgU1LkPuEqlRcsSyf2nB1fR+8bJZ+q8\nLNz1\r\n=BXeR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB746oqK5PtI/Ruet2mDg7xgMdkoWgLWsF0G7q8ZhXwwAiEAk65GSGHNUavJqfxL7Fg3rKKQLGHzY+uliDHCn1YUcUM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4721a6dbfafd4a654f50455c32b513b9840b83c5_1606066712024_0.7010867883405747"},"_hasShrinkwrap":false},"0.0.0-691cf1e692e056825a67d32593ad11e525cec42a":{"name":"react-image","version":"0.0.0-691cf1e692e056825a67d32593ad11e525cec42a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.7","@babel/core":"7.12.7","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.4.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"691cf1e692e056825a67d32593ad11e525cec42a","_id":"react-image@0.0.0-691cf1e692e056825a67d32593ad11e525cec42a","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-LKA/SIzdZylQ3Bli0qNoDeDqP3CB21MRx8HLSqrOSZua1ZGQp6UTdyBUn6tOGOs9y1JeMNqHr3dYqEOc/1J4+g==","shasum":"4d38d58d722572770ae74a50cf9f43e1df4055fa","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-691cf1e692e056825a67d32593ad11e525cec42a.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuqq1CRA9TVsSAnZWagAAsiAP/0RLcHPkN5qhmG8d5jxs\nLXAlY6i+sDdCGz6JA/+ErPiQJ1OuzSXkiLlEjkS5lFYw63nx8p0P8y6ZBVvZ\n6fchE6dzTdgjg704Moix2OCGXqGnbhnR8z5gq31tQVRpvjUlwykdOytOJScb\n+J1kh0Ji3Cb2iU40n8s6dPPegk2VbW/vnNmQ2vVcqXEixNGeIeX3jtRJ6EVa\nnR03Pimk77Bn19Jo9JTQfBuHTUzm5r8LuIgMG0tHTcakGX1ZUNzor3Uzhw0L\nGROKXmtyi136upQv+3AcxDO1GQ1ab+hY8N/ihLwipnUyX6G/GC8iunN+JoQR\nuSxdplYmAfRcHH9DS6ErBJD58NJnvOV0Oda+dtqrpVavmsUCP5ySYrnTCtcw\nGF5mLGPuCucSxCo2TSDY4u2PGjvrXoLjGhu7B+xJdGFHFtzfj0PfTU13iAOS\nA0F5AEywhkWsaxKl2bqKFP+Cl6N5+A7myswX+RJfRoHMcRcWe14engFX8FIO\nIoeBER+bl9jli57qSl8DmBVCu9zUwGWxkmqshB3Kqkfflb4lD6VKZqWbTiO0\n4K7XleBmnzGvHYaNbo6KQdTjtT6cwRNvBStyUqLIJFkl+4VxraCWstsfV/89\nx+GH4wpb2zJx3GDIJ3qpNHLfhsHXibCdtzRf7uY1mfTJHNWnENPKSI8hGLBw\nwD7r\r\n=NNQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYUsEHsd2dWtMCInG5pvUXZTeBT7ZgD/JTZxzK1Ooa6AiBmUJi1NmfePTyjAPZEZIxBgDuVN644EVOA2XTIbZp9Hg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-691cf1e692e056825a67d32593ad11e525cec42a_1606068916854_0.18304805982439887"},"_hasShrinkwrap":false},"0.0.0-7527b670e9a373e6eddb84990b9eb3233be1934d":{"name":"react-image","version":"0.0.0-7527b670e9a373e6eddb84990b9eb3233be1934d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.7","@babel/core":"7.12.7","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"16.9.56","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.6.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7527b670e9a373e6eddb84990b9eb3233be1934d","_id":"react-image@0.0.0-7527b670e9a373e6eddb84990b9eb3233be1934d","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-fWDEg62uQn/FAXZ8Z5vsLdSfYqMaREvw+VGY/4WCTnX25yArdflMbL8tahUhKeI0xreFzlW9BOo1ehnyiqb75A==","shasum":"143f99455e0c2308e00e0421485cdaabe3620394","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7527b670e9a373e6eddb84990b9eb3233be1934d.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBj3CRA9TVsSAnZWagAA77UP/0nePUlp+hb6jOaLSJ//\nIwgxnoftuSDmDVvJ1C9vkb/HMmd+rl6ObJkGDh+X48ttGC7DnTa7pMaVQJa6\nt4iWs+73gcbgF2hjdq4QN1KTFgJ//tgmrrHsSjovYUMv2vjMw/jDOi/ZkB5D\nVjxSLhCSgQ46UO2QPWtASMbCuOATq8HBZzQ1luGnSWSinUYrBhDRpnFOc2mk\nWSfddrykEXfIrhFzAvebAe5ahCBCPUO57wWzBvCeuICJMvZVJRx6CMeCPY2i\nRJQdnM+Od7Io1QI/lvltA9k++p736yE3asqQBwRkGRFp//w+Z5DTMeDQFnI2\nyPk2lG2JPxzf3fUPFeNxj+bK2NPgKeglnOapKfWbQM0hFU7k3A+sJQhz3Gzw\nMYNYdR4tiSCQcf51K/qborRzh0AR2Zi7QV4oyZSXm6JBlkNgVySGlQHqZQHw\nOxwNSA+LZAtvOxdT2ool4RrdaLXIrOMFv68UzbyihNbRlyEKEcXuelcciQtM\nsIDn3D3s7do9EdcJUigZ4QsNLlnb4SUDrKxzjS2VNRHjjbOjeQBmxdRr2xAd\nkzZbrJRuLKg0QVY/3TE80T+ZqC1yVt93se9SNChl8kcRBvic9R9qQgb0Vupv\nTrZvaxZzUGiAQsiB8nCTLxmEdbQIdwK5HLC0cKJKpAiedgItcVVbwaW4VMBa\n3TJA\r\n=jQT6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRS3sG5llLd9OTwMgh53v/h4iFbUq5DfdkYZikDTAPsAiEA7iyeFG9oKCtgY6TK6u8Vd/nc2+NxDdXsjeW6mC5RSF0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7527b670e9a373e6eddb84990b9eb3233be1934d_1606162678791_0.1953950465522032"},"_hasShrinkwrap":false},"0.0.0-1fae9106052768ed69b25942b219713182d48a66":{"name":"react-image","version":"0.0.0-1fae9106052768ed69b25942b219713182d48a66","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.7","@babel/core":"7.12.7","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"17.0.0","@types/react-dom":"16.9.9","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.6.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1fae9106052768ed69b25942b219713182d48a66","_id":"react-image@0.0.0-1fae9106052768ed69b25942b219713182d48a66","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-76kCS0vgdxI6dQv4Wo7WdEzM+30xxLJu+QmI07mDE7DIjlIz2OnY0t/f6glDmQdl1Q36U9mUgEZvtp2trazWvg==","shasum":"4467dc0b94944a532fcbf5042945be4a29bcb862","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1fae9106052768ed69b25942b219713182d48a66.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvB9JCRA9TVsSAnZWagAAhKMP/36kGZ0ZEU4KZFrxUDOx\nhvJq1B9URYhgaMhnR5nwxn3XOgFt6tPLTxham9aN7HHRL5tNqBP7sc5BFeZw\nUUp8UKktjVHtWSGaPczFD4Ape31C8LXa9LV9QdZJI/aDI4lm+HpnfSIdcnVO\nPCCRpGttNxPWhetOatGXdjtX1reuCh/kRojjNw3Snp8Nt2quhXYIYYmo7zc6\n1hoOzn9Iefo4My4Jo4yNDvFrexmlj2cP+CkZjlH4pzh0Zu7YsfTZFY9kQqay\nr9+55cwhStz6kOb9iHSLvlHaZgk6XrWX7K9fs/M964SrjLwHyjZIMVAiDYwl\nZxQxVOIm/x4sjHGoh6ldi9VNVpqI7q6Grz+VRvASneBB9TXXGzk+inpvLBEB\n5gAIZeH9hxfw58E9gkL6sT1wewor/4trHmQw/U5pzIfor77Tsb+Oo0trRy6J\nFkbDaeuA154auQx4dEpaHDfCmEi0xwvBpOdS6lsJALDk0YQHMJ9o04cyw2PZ\nuMJM4If9anftVmHlnTOtR5XfHGs98mXV3XadPFqT5IItgfyBtLu3RkM7BVZy\nvNYEt6wjk3j5nNQCdMqgDBWnu4R5jCA2ct4UMNj2EMkgs2gLG/La1aO/yEV5\nHrUKZgnaypTxrR2nTEFfZPdee9z1NKZwizAMRkn+jsHmujDg1xdqXeIcS3rz\nFy0h\r\n=K+A7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF31Qibvo3kZbARxyEA9fCzgpiSgAHTqicnB2g3ZHFKfAiAThp2+N1K0suft5Fx6/R5U4M/bDh08AQh70K+hxtFMzA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1fae9106052768ed69b25942b219713182d48a66_1606164296948_0.855877298607"},"_hasShrinkwrap":false},"0.0.0-5713df320f34864998f983fa0e5ed4015138091f":{"name":"react-image","version":"0.0.0-5713df320f34864998f983fa0e5ed4015138091f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.7","@babel/core":"7.12.7","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.6.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5713df320f34864998f983fa0e5ed4015138091f","_id":"react-image@0.0.0-5713df320f34864998f983fa0e5ed4015138091f","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-lhkxw48pM/n7+Ohe0fGLs5qunu5j1IlScSZn8pBxZ0EiErHDcRkAj0VdgjnntI+WrGYly7AAJLgmrhE53M29zA==","shasum":"285579c670c50f761e1f44a7abb2cf1d4944c12c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5713df320f34864998f983fa0e5ed4015138091f.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvY5+CRA9TVsSAnZWagAArRMQAJ2j/lkda4/Ul1vrhpGe\nfjmVaeEZrR2UTfyiCXMMqVJ3lUkUexe94VPYabfAJcjGyxPtvkLqdgtfa9Cr\nhIByGnbUyKWC/fPtWFZFhtlmCCSzuJtVKD7clpDcKlS28Z1+5eWaZGuF5Sah\nCkhHVPSu3d6PbX7XKqHbSyDkiVPeHajFit2tfExPBPP1rtOMI5oLcwaJzq11\nm3ae+Gnvd9KGbZtyttt7T/3cJXTuBnvwiEt5fbS0RyBrGF9qNabAmMh2kTmS\nDpggntH9G7OVoTv9KjcfXYLGiNUAsW/IloyBMWJnow60kzBG4S/mxTqhsl2z\n2IzJEMUKrbDUZ9Bbn4abVDEIjXDx1zc3k9YHb9I4wq0t2oacqw1zjtPom9GI\nuoqoyOsrtax0g3cL7cDXJMFVrw5QRmeSbBVZOSOut2WMTYHH94Xu3rjj6JHJ\ngZ2O8JZMxVS3CtXNjbqlJr5nt2uN2R7lh2yco0O/b+EskJxh7MzsX5LtLy1l\ndJuv5RSE/epp5zxauxVMn3kwDYNxoIABhUB4yXCMAhIGT0w+v9rJmRoENCjB\nFamQPTqLRPctI3MiXHqA2OPGB9KndJRI3Dxy8slXhKhLY3RH4RMYeiz7fVF3\n/1lT472HOkD0i0hau9Kgg5BHxif1IbLF+LZIgTozI1d+aprE2INh9R9zf3IS\nPclX\r\n=Bvp7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqp6KduziivMDJKILaHZSj/lQvs377MU+7CgKsxjanRAiEAuBZcwphDj8M9kBztG97J5BmAJpkoMtql8oZI5LqX6L4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5713df320f34864998f983fa0e5ed4015138091f_1606258301514_0.1969155793824442"},"_hasShrinkwrap":false},"0.0.0-ca5f535cc500616e40180239e2d0f79fbf39490c":{"name":"react-image","version":"0.0.0-ca5f535cc500616e40180239e2d0f79fbf39490c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.6.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ca5f535cc500616e40180239e2d0f79fbf39490c","_id":"react-image@0.0.0-ca5f535cc500616e40180239e2d0f79fbf39490c","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-jMk70puoWw3w71bqOG0hYT3gnONsPFgVi4uJT5yqc2TtnpAC4Mq+DpNWjXRrBYsPk/WNV/Ovt091GPKbCocUuw==","shasum":"93d733d66260e1d1fc79705219458dbc429546fe","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ca5f535cc500616e40180239e2d0f79fbf39490c.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvwUNCRA9TVsSAnZWagAA5eUP/iY3zwbZ7b7y/ds7K5PK\nXiQcUsoYtHMuuWphdAlC67FJ/vT3kdaapMIi/j3qqKdX06Fl98nNuqPq1DAE\nrlk2yY10it/J4LUsMiON/c25n/K+grvGKBJQgC9IoSpBCY8YRj07IqXfWxr4\n5h9CrIwimgiYbf5Nn+16c2W5M5JGOmmRTVkyZVQVmr7GCeItxR8Sb9ywyZEd\nG9TYtI/SBzxfMdGHwYiiqcBXvq2VR4/Nap/Z3J/4jHOUwFbNLAu98YBRReHv\nYNoP8LSsH8ndvpEtpb9CvdMwjqZxnH3WHOJw71Fnt9mFZnDMZ9BzqZyeXPce\nCCGvueFiKrQ+3z5lzBoViWhvq0ogOW1yEEmXf0O9nn+bwOTd3ld3LemQT5lc\n3fXvu/RpwAgz9/Mr/eLcyobhIalY21rPPROBHsXgJ46sP/lJ9yujfvroHC/B\nH4ibHkVhIAPFt94bCMwkquFLDlxMCx+LZaWUr/j5nkGaFKYL8GK/MxF5Ufqm\nUOe2FVS5DrOdOHGgSyMkgRGK8g/fAZxoLeWgAYKhSUU+2OsMsgzRKTuUIGTB\n2qhq0gH0i3QVlgSfnhXFF7oHyi+flJjro2A2jRuh1YSRBAnivHFKWYFxOv2Y\nWoOdMWvBljfVa/glyjp5ozgMtlj1029Dxb8DiaF95OlWxlhSCwCFrAUzv61z\nfRZw\r\n=ThRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzQaAAuTV3M5YOtoTVryk+UBTXdLIfB1QAf+KpreP6ewIhAJPL8SvTUS5mxHl6ydn1qCO/txS1C4aJktWlU3Z6Qze+"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ca5f535cc500616e40180239e2d0f79fbf39490c_1606354189255_0.7184350995987414"},"_hasShrinkwrap":false},"0.0.0-38ab58ab4a894ea3a6b3af4a1d616590ab0bee2e":{"name":"react-image","version":"0.0.0-38ab58ab4a894ea3a6b3af4a1d616590ab0bee2e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.1","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.8.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"38ab58ab4a894ea3a6b3af4a1d616590ab0bee2e","_id":"react-image@0.0.0-38ab58ab4a894ea3a6b3af4a1d616590ab0bee2e","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ue3fNp8XSBKT9Q9mH4ctp9nIn6uOuONthty+HMoWe3TJA017OuoL5iINcv6uVU5AwKjJCoclHYzkqrU4tINNwQ==","shasum":"dd273f1364bccd2871ce119e2567f5f0fd816644","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-38ab58ab4a894ea3a6b3af4a1d616590ab0bee2e.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwVPqCRA9TVsSAnZWagAAyVkP/A/xhJhAd/gGGv/4ON0g\nU6p8bjV/vQRQkS/41KB7eAAH0OSP6cCzoVI1ttBceF3AHOYF+1dCEbtI1ENd\nX2VyPSfZ6vpGX8mSJDT/hxzmruToFl1Oz+/0N+2UiValMniA6aTOIN5SDWcz\nb8KnSP3p5A5KkrftJ0/iT+pOlx45xgtsJardsefsPW0Zp0DBZkQGXXbf0ohT\nPN1g2AwSztDIXJthUHQKSJo4Gjb6qlJOMKarkhMrs+DeJ+emnQj4fl4l63r5\nxX0o4RXXGxFvAxxMbLfaEDwMFHg4O8hSWZ6mQZ3V1y0Ai22mhhgNvLWaRgxH\nZa0+v64c55m4CSLTBrNnBoUp8w5YFG1BLqLONJo/kURNNhnMXEzdUy4xe2Uy\nq86B2LpCWAnv+XiUJUAslnFwaAYfy6MEy9Rq3A8NiIVAB384RNJRepvRfQip\nLsQGsoYODxKVH1IfeLhXOPmYeRizK5Aurvbfjz8nhbRK9VCtEL8sEeyFjhHh\na5nzXEv9E77i6d6AgHaAWRttxoVlhdeEriCZk+4hn85gkGU/H5O02wjrrl/d\nC4TqnMpuacq9rJiCh+ZWcP2PS9LOQ1afEw2BzTDvMHFdAVLrzCNqR3iet8YM\nMCSFmeXrkrfbxIWDjVMyL5/rt71XXy8/3MykjOsSeAnR3LZ4W7YiBjbMvGAL\nbmB6\r\n=ijwS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe41EcbhwCYcWgtjZvNKq5phrocBDAgvijyAtH8de+WwIhAPgbP0LRYLoPU3UXQePGyuBIdZSGou5OAKdrToH2cEI+"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-38ab58ab4a894ea3a6b3af4a1d616590ab0bee2e_1606505449607_0.836536198734344"},"_hasShrinkwrap":false},"0.0.0-fda00e7e28a8718779995cf99f86162d6ceac8f8":{"name":"react-image","version":"0.0.0-fda00e7e28a8718779995cf99f86162d6ceac8f8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.0","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.8.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fda00e7e28a8718779995cf99f86162d6ceac8f8","_id":"react-image@0.0.0-fda00e7e28a8718779995cf99f86162d6ceac8f8","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-HKAUuQiZbS135Vpg9hKKbvoOZ6tEAVhN4ZXVJ4j6pFmVi40/mmNQPvsTi9gjJspu5qjAX5rloXPWHqiMSZCs1Q==","shasum":"7b7340ffd6bdb086cdd4d2e917492a8d77bdd7dc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fda00e7e28a8718779995cf99f86162d6ceac8f8.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwsKYCRA9TVsSAnZWagAAs40P/0Ya4pco0wOXgsLAh55Y\nS7aJI4LAUDO7NLmprM4ndL4FijnK8HkQGwk1BPTwjvm1nXiAa/F6jahiA7h4\nNhzeHqNTlCidkluFLPwmq3/CxvawuxzmapYAho8toA4X0gGVg3G1rx77Vsfp\nb8vzo//CrVwE+/aJAGod0bvSjLA7kdz1U74L0CXU/yZMPI6fV/xulz+ADwc1\nINM+DedSKUF+LN/OGSVoBo6HJIzf78f/maBli9nYnt9gMGuMFkGCyblKHc6f\n7ZJREeQUbqU8dQaqnvtePUM1aXCdlfSAS1ikAm9VqIHGrMMGlKw69l1vn7zA\nfXLlsnS6Yo0lBI3L7UG77LQ18ZSOBWFbK/xqc6rogBhtuoQizlBmmCy5FAGi\nEueLQIoPBRdBKaDBRRjDXBBto+Pk4jUbmte0frehtIQKyqLATSNxUtLaPDnW\niWIBFa2JnlZhEGl0ES4CbrPGIwm41Foe8G37BXt018vM5YB+Y6j1SsgBTA/7\nBGDsZGH863QIQ8K5FDErPrIa2ivqGVnFp1zkVbO9rZUnpFTf8iei3FPOW6EL\nbvlKFQ6G8ac2DXnULjGGVi3Im+jUaod7RUqJVvtOFccZNiDCSlU7g0GKY7NH\nHDdgv+hnc0YLwih9AoWEf4sNLY1qClbguusD4b4IyTTSftprcGMet7Olnjaj\noEHn\r\n=mtTB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLRSS66wzy7ynvm92Iq9ADH4RzEY++F84aCfkapK6NzAIgZvx+jF4nuWyhjvW6Sd/TqoMlbl7lTe2UkxeM1ctDmsw="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fda00e7e28a8718779995cf99f86162d6ceac8f8_1606599319444_0.02300935026194839"},"_hasShrinkwrap":false},"0.0.0-daa166f353626c9225212a0ed677a51f8f77b1cc":{"name":"react-image","version":"0.0.0-daa166f353626c9225212a0ed677a51f8f77b1cc","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.8.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"daa166f353626c9225212a0ed677a51f8f77b1cc","_id":"react-image@0.0.0-daa166f353626c9225212a0ed677a51f8f77b1cc","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-+KOHCXFLj/KU/3ctmr5g4clDwqwzpFr2GoMOa5kItTcExpb85wUFT84nEYbAz5gJ9XZ3Mdm6Nx+IzSNVewCRvQ==","shasum":"0c29946e0d73fd4580867563e6f5fe1dddfd2395","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-daa166f353626c9225212a0ed677a51f8f77b1cc.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxCrOCRA9TVsSAnZWagAA/egP/AqtC7P7Qz6IkHAz7kil\nLYRMExnFBlXcl3Nv4i1V21QHBlISJcwW64bolA6os4P713IJdlU5qDoqYnM/\nAz5ocDyj6lwl4Pj3sV8OSlah4iDaV3u1ecWvU1ED5kRrl24W0uiGLe1taWAA\ndsrwX1jTvECPXx63Rwzs5VGA7CJtAEHmDPNFsvlIV/hGH5iZwrYzkhC2h1MV\nF2hQlvGDh5Q8CkNZb7XjOsv0WvilwhOR5bqqETes7fbw4cK2MBUV8iwoiaQ7\nGgCdACqAyyhDv/jqRiNEJcjkzIYuYPk0bPo6JP95+xoppwlUUF2YfmFXtYxP\nupJqOL5keJOQbxkjceoWzTf4pFmxJHrpRnL4QNpT3nO7Fc7whS5wKDkq6oFe\neTLJ935k8ZxMz9oArHluybojJ0vUE49nfSuU2YYDhVEi5sERCXd6qq97aJPX\nzFp6h+TpMF8ntzMX6daNh3tu96XCaZi6OViPmoLHYldai6ueQdYdxhGSF92g\nSvUk7Zn0IpJRpdD86UXJNPs+c1/a7fj2jYvC/928Un7G2sgBVpUmswGf4X8e\nECJW6ada046NOAucIvJoJgTCy1HbA2UBc0ChFAF0SFK6I7vAIcuO7Pa4ALS8\nBSDm5DGgoL3lJNmHxVlJNrv8qaxk5WSAnQ+VhRiiqzMS7rZHN9+IqWdbVpmI\nOFeL\r\n=sYeH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9EA2kNS1FScF+zgWsi8wkSEyOZEUJ2qHRFTjS3zgb9AIgQe4iSLdaI3bRQ1xP5nTOg1WEGVYTizvDQ9VPCHz162w="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-daa166f353626c9225212a0ed677a51f8f77b1cc_1606691534415_0.31460533041330296"},"_hasShrinkwrap":false},"0.0.0-02497e036b082ce33245acbeb9a6f6748abd445c":{"name":"react-image","version":"0.0.0-02497e036b082ce33245acbeb9a6f6748abd445c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.33.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.9.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"02497e036b082ce33245acbeb9a6f6748abd445c","_id":"react-image@0.0.0-02497e036b082ce33245acbeb9a6f6748abd445c","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-etXk/cUQQUaMMSn/XOaVBJkCoutvlVM0h4DlFqQh3RgCbhlm7sAtuu/ZgLM5mw/wHBJpvdfJVN1jcLT4QFZrOw==","shasum":"ccb2172d0f59dc54eb956eee626ecb9b3d672356","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-02497e036b082ce33245acbeb9a6f6748abd445c.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxEe6CRA9TVsSAnZWagAApjEP/j0V2M2OpqDzNwP0aOpm\nE5tiCKqJu0p+32Otno0MLlX2BpwPuvPE4djSNK14D5Vd5kyhST5B/hRxPQuz\n7Uf1qm9KFhqKLU0Cb0qcnzNNhEkOT3+OktMy6XxZ8ZTot/B0u4bATwCXZVPp\nJ3cqgaITXXPamktGqx/9A2GlK+oB1KbTe1t2n4TiXYdnY2/KlBV37fS5YJH+\nsvSnt/AxvN01jfa5rslLxdWe8D/DTPpq2gci6+kmveonbY8JYMG0Qa+Mj45R\nwmoA+oR68HlH+MbVaMWFNaYmrmqfOpKc071/v+pGXTM7as2vPYDWUKnr2xKY\nrZrg4fwAeGRdUUf2V2PpuwptzfL9ClNk969Mcf6MZdhOiRoH6gZZC14KXdq1\nWw9zzKVFzn4dh76p07Q3RH5O2hVVnQZK/jwy0XX2bLNbVQEHvdgiuebwvrXa\nAede6kjnLkwhGVyMR+ZBc+3jyb2A17rbwEIwVsOXhjqs51L6ssySB0EpFHQB\nIkrddaQygM6Qpg0mEkD50O41AcFAFiuzRxBTxUDXiAmLulFUmsHWS1oBbozr\ncl6VQc3tUx2Q8qf1sgyzISCy1pUWrfeTOX7vjvxOvtDfRCwAK5xaXXA0bodf\njsf+aX98iWk1DIUZ2wzHCLv68KqE872waULJhu++yTolRUtneXYbZUobT9/6\naGrb\r\n=fd1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5mZyax/JWhL/NjUnjZ89fcCZr80wNWiSjgUogQv+/oQIhAO1W8zXzfVycfalZlmvyrtnKm4U4wZ3GDN58NF2n8iBL"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-02497e036b082ce33245acbeb9a6f6748abd445c_1606698937931_0.8516411272762492"},"_hasShrinkwrap":false},"0.0.0-e36f2554c865244cbfd509ebc20af76fa91336f7":{"name":"react-image","version":"0.0.0-e36f2554c865244cbfd509ebc20af76fa91336f7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.15","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.9.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e36f2554c865244cbfd509ebc20af76fa91336f7","_id":"react-image@0.0.0-e36f2554c865244cbfd509ebc20af76fa91336f7","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-aE4bg3qjUXVZJcJkrk1a5H8trl/qy79pifVTXOpLIoPpu+TdsLn1d+0tylfx2uqB6tEM6JjahxERM6gbanZgcA==","shasum":"608cb543979f34bf930fddbdb30d20dfadbe55c7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e36f2554c865244cbfd509ebc20af76fa91336f7.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxamICRA9TVsSAnZWagAA4iYQAI/mI+ahOJY14rCOog5X\n/YBduFTk+p5g4M0jORLIzr5CcEtqq7XS+JqvAVuVIEB7Qat5aT8v14m4Eymq\n7kZmGbLeITv4eMtUwSTfGlEMYZwor0BjxulYX08Ouz/xqIvjYv/PdS5CHB6Y\ntf7qETtHFA4UMGZkmZghHcQUDdYJlm2J2uXQK63AXMrJOJRknpLvs11dMoNe\nSBMff9d/a1SPStqJpcMeTOcu8ZuLwZ2Hwn58QPRsDek/tZ2ZVH64AdcHiwMW\nozo5WB2wU/PyonEtv5h3Y7DM3F0sf4pUgRNOYTgdI+/BmFirgzK+HhkvsUzR\niaDw4ImfT4u/mI90LofBuNyYvajizntSTZ3ZgqzoiRvxfiPNRMwEc4/oO3AO\nUJ7YtxbueW7s2Z3s/NOXay2PCRJGF3GFcLWYpOSXx1d9pD3GG40mlUOHyUvz\nlrrpikd8ExVKbL/8cASeSGEmQ0b0vrJmyYmU9QSzdrUSJ78gk2+55zei6Jco\nPA3w/iH2DCZH6AxW7s3hSIEZOwUZ6M4fO1IkGe3wEq8NFcI6LNh8iDIryDrT\n1SB6Hhsh3zoYn4JofNikka/q7N1XjlP4mxu/Qt5tSqwwSnwq3TXj6yWiTdgo\n1WGdtO/nLSglbmm5oGV+dJ6Vly1LFRMmbBYgfiMpA/Rq1BqO6ZFN5WUW98vr\nf+AE\r\n=I8q+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbq7aeUii2ruFxLXvchmrO41NEQFaO5fWcS5Tx6urDYAIhAO4y9W/oRogj2l8U8W5lw6eOtNN9tfIBTNlzIDgADspR"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e36f2554c865244cbfd509ebc20af76fa91336f7_1606789511475_0.022193036931633436"},"_hasShrinkwrap":false},"0.0.0-0e887eb6be87b7bc33070997cb3f38e0e24e9fed":{"name":"react-image","version":"0.0.0-0e887eb6be87b7bc33070997cb3f38e0e24e9fed","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.16","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.2","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.9.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0e887eb6be87b7bc33070997cb3f38e0e24e9fed","_id":"react-image@0.0.0-0e887eb6be87b7bc33070997cb3f38e0e24e9fed","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-jkAoVo6TyJUY8sRHZU3UtzTV6YiiBs478QKKgjlbfiHvDOEGEaF3d/Wlyxr6Gd0boRFs5zaMgxbM/8r0W+Ar3g==","shasum":"7036d3dc195f28153db60f9565c4a4194b405d02","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0e887eb6be87b7bc33070997cb3f38e0e24e9fed.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyBHHCRA9TVsSAnZWagAAdXwP/iT2F36YUvMMquVvF/K4\nb/9w//1w48QmSzWSd+id0B7ZDdhl29gEYyiVT0e+0ZghmkR8Cm+xEY4GjNrh\nXkmoCmVz3f1U5ooSdYvyM+8YxUpHGPauJ3YWaWpYLiV4N25Y3BC75qDtUuYX\n3MNNqQ0gHfaqb3MJMxlCSmJiMUrZg9njkOe/0xzv34Gv0yGkNZt7AHSM8Yqu\nRFQs4GomEy7yJil7/fYaoEGlnZmumDMqqylmEbWt8dHAfOopO23qc2xAMfEv\nWUIy99GSlwSnXkdy7ceqspEpKgQM4oHKdYASZmyxexKCeI5jQz7hWJ35c5wP\nsc+5UwBKKwGWYpaWSvZCXHri8y9vw3SIvbz7QcLucjjWoCGaICSna/X/ogWb\nJJ1BzB7yvG0oUDOiceVqVp3tlMuGUEq3r6jlA09ZikhQOQiMpiFF09dQNfJB\nNR6jIeigy1HG8MrHZgxW7go8nv9mS/oUc5SH6VtoR4HyG4JMCwUlc3g+B7O6\nVIzWqGz/ESN60yVWcxsaJxAIa289DAZb0mzXbMBuCnAms/fASkg1O0YOwbTK\nwhkpiV1GNrqgiR6k7rxjn5ZTAdz05UTktphoboXgM+G4dADMq+1Q+wdy/Of1\nm4UAaz8V5OjEYfG5IBxJV4F1kLG7lbSDzG0zORfxvMf4PABkDsLYlekuGFAE\nBFqw\r\n=0iN2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFE8sjaJNvjEIJmSwU6mUHCjEXXgpaZr2nSvbzCC3/7tAiEAwE8cM3AlB5GugHVgx8e4o2rQ4BAn0hBkzE1mQn27IBY="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0e887eb6be87b7bc33070997cb3f38e0e24e9fed_1606947270911_0.9449715536733314"},"_hasShrinkwrap":false},"0.0.0-12184254acd88e4078784bbf306f9f5a14fa3ce9":{"name":"react-image","version":"0.0.0-12184254acd88e4078784bbf306f9f5a14fa3ce9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.16","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.9.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"12184254acd88e4078784bbf306f9f5a14fa3ce9","_id":"react-image@0.0.0-12184254acd88e4078784bbf306f9f5a14fa3ce9","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-04fKfhqSruJJpcwPWZl4tTIpaG60gD9qeWjDNZ5H34+bHWtDxdolUu5DoCXhmNqDW7vdWe2ELxs6PLBOuMAuQQ==","shasum":"96a9fccbf34be369a54b660836d63f8527e4cfb4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-12184254acd88e4078784bbf306f9f5a14fa3ce9.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyCoACRA9TVsSAnZWagAAK3gP/3+lrkab7bmMDKff6I6O\nCQXKQ+6JmTMiMjFgpA6DjEiAVqLJ61pgkoGW9ItT+Xueldx0H7GRL1Yfr+T7\n/AbXKDTHjN3kYLOgZiDHDONN5+LVpVe4BaiQTQaY+J5YASRG36ZpbYA3RWqw\nh7rYHrsiPUqNG37C/oNVtQN1jQr7+WxETBbQB3wW5tW4SNG47vPGS3U5Y8xI\nB1ORHpHwe6LhQDG6BJEhuVx+XWNa8DKFHe2DTJE/PJce/gEGTVZO8N/9G2KC\n/HpylXw9kxYCCGps1Gz2ObQ01JC8G5liU0jGy98fMLVeKq+WAzlS3WwUExWP\nb+U1+dRkwQiVAZZz98UW1wRNjQmbkpPnwMEZzKVgEBuxgG1hPc3ehiu6P67f\nw+Ae8yGuRIRnhuu+i4xUspshvZsFlcDN/urCOsnKjkBXc38Z31SitbrlWCjI\nDiozTYdctOT6UIWY8KPmDyIRjcEcr2ZMtRGwCjU9Hi0WDp80/MP6gSMH7ASi\nQIeTrPZWXjv2HWU1LvrewVSJ2JzNa7yzmH79h3ofWAoHPhH3qhSRr38g7R9l\nmOwcSB9do/JolB8sYuiqDf6jpvdO5Sd228NBtTYgh325NrG8CWiL1t3zjYMP\ncpsetcN5fvco0T1mld2/b0fcLjzI988IsxdkK0HynM96Ibwe6vbxkjx8NwcU\nkWoW\r\n=gvDX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1tnTOxwyucX+JWOgXDPAz5FaOYtAtnkpd//KALcpQ4AIgYLKykMsSVTQC8sA43kF9uwZUsGn//hViY7T2eWNpE4M="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-12184254acd88e4078784bbf306f9f5a14fa3ce9_1606953472245_0.5735857721583923"},"_hasShrinkwrap":false},"0.0.0-0c6f485baa68683a6f8c3c452a9957429ea17e64":{"name":"react-image","version":"0.0.0-0c6f485baa68683a6f8c3c452a9957429ea17e64","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.16","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.9.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0c6f485baa68683a6f8c3c452a9957429ea17e64","_id":"react-image@0.0.0-0c6f485baa68683a6f8c3c452a9957429ea17e64","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-bbeFI+F3kYbcb/tGdKljupteCalaalv71CGg5n99vAgsOehfcRxM5TJo6gTr1j7n+48d3aU+PQMSJqM1kzymcw==","shasum":"f255477539b580a477bc72400f0b392806e64fae","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0c6f485baa68683a6f8c3c452a9957429ea17e64.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyee5CRA9TVsSAnZWagAAzk8P/RqODq4BL7vKanoHig0U\nAp1Y/mjhhI6FQIjyat5e1kJ5I+4M0OBAFfu52zL98XeIJ64yATwHoeq3tm1n\nEr/IROAt1EirhtqX5NqXzMjRypuBv7g5qjxNnfz5fyZONf8OzkgxN5vvoWDN\nof4xN2S6WDpjirjnJoNwOVa1gI5DmKY6DyRYWXriqmg9Lstggc/u3sS1mA4r\nxf4CON95SiRbSrGiH9JrVIaHVK6m2MPRPhbyBoLxaWM4jzYM8s0N2PXjzbJY\n1PZtvYTgY5LJv7f7fmr1phAKCV5u41CB4mnlwU0MnKI7F3AtYQjB4NEgb8vo\nL9dtIO4P+GRvwQeVd2ZUlV2NlzAjf8Y91Kfa+JYKgWPrv/bEymTAjq6ke1j6\nXtYyV9uc5pHNB00f92W+GeNiqeEpYf6v8yp8bGSGXoGlHjA2NhQOOXy1rE4Y\neu4tLWuPGeWRAX4gptuQ7RhQ4ajYFyw2IfmEP6lfyo48JAqDKCxCspdHBe3q\npSYrN3WHEZ2EtC/5392AKLAjkZEEj1xMUa/4KRzCqpCLv0nzkbSJMxMpszIR\nBtdKusw/b0lAnwq+DuodVGvTMg4j2+uP4GchVFF4MCXn/7ilIJT65NGXO5gN\ns+7bpUrBqHv5cyPFuff41nbAWBebGzHBbPQP3I31B7aeHAkClXPPYtFpqBls\nlX2y\r\n=hdJQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGbJqaEjOoY8sHivZ+aSZIbDHjSaGcU7hBGClIzNmPSQIgIFhMp4doDW1Q6VkLOi6GhVY9wMrC3yQqOBP8LsIZhZ0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0c6f485baa68683a6f8c3c452a9957429ea17e64_1607067577207_0.63287437664301"},"_hasShrinkwrap":false},"0.0.0-2e39d91dcad014189bd3ead48178eee78ef8c76d":{"name":"react-image","version":"0.0.0-2e39d91dcad014189bd3ead48178eee78ef8c76d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.16","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2e39d91dcad014189bd3ead48178eee78ef8c76d","_id":"react-image@0.0.0-2e39d91dcad014189bd3ead48178eee78ef8c76d","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-kBkH5x4/mLeKGFd3A3x1jFkOZBGpjzbvWKd3UopSSeHbFbZxXtQSfQm52f1SXAZ48hLtmUgWNOX7Zh4clVcN/A==","shasum":"f70c93d0e88d18fd032e4ab9f9001bbc6a383f4a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2e39d91dcad014189bd3ead48178eee78ef8c76d.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzApnCRA9TVsSAnZWagAAGngP/Al8mktzD80YkITdoCc/\nlz8EVt7ULJb/OWI6oEc1LaehtiuzVLskVR75QSzNBuyTift8pJ2ScetPqQUn\nmp/x6zWiASIwkqk0+j30lkba8cYxoeA2smVbVo251hBOKmBtKFIcQVSeZv1D\nB5XxUojPEjolBwLdCD5IecY0iIP3Ig/QiPjtj8fCDY9bTlTUVpAGciMp4DI9\nEC8C9AF3Ih08TSxa5r8sHptSPFGhACRTSr1GIlpyjuvUwLOnbXqXuHgRDP09\n1Xh+dKoGci0diWr2q4W7i24jjPOClQG/SvaInbQNBJEgfSW1Ih2UVOO/GbWJ\n5pz/FpB9J9ZlypCJbzXZppFdt0y8K0Im4jYeqEqsZw/rrGGJHcNyIfucCcaa\nNp2k1fZ5XUxEFoXghtIUpYil+sLiXiBuUDUSdmlJn+Hrp8SYuuZcfBwtozR1\nlgdqiH2h7tyiX80IAuII2ah222/6HVNB1gxe7tOHaNX8D5OKegebdha+ffzx\nd7icgDknoDXmG8bfsCC3lBBMzCsU/1JTxkOAvxtAsLR96FfPIcgYMO3XdXDb\nRc/4Cj5Zyq16DGSkefb7XpOtel5GZwU+HxgPnVBRCJSu2iZMfcnUvVraY/cV\nLnRHu/3LOkFIdWb/jMH+ejKHXOSf4+vlfIWdosttCuI0pBd9Oa4ytbfsfc0p\nfbHJ\r\n=iP3f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAF3vF9I5lCKHGhOT1ozlzjEzjwMoFZaHSJ2YIrWlyXRAiBDSHBEDODTuzQjv3qxkWFtUg092CMnidPv7OJLpvU98Q=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2e39d91dcad014189bd3ead48178eee78ef8c76d_1607207527380_0.9155469299460897"},"_hasShrinkwrap":false},"0.0.0-7920ff8bf928ccc55f9230aabbbe11bcd5b2e2ab":{"name":"react-image","version":"0.0.0-7920ff8bf928ccc55f9230aabbbe11bcd5b2e2ab","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.16","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7920ff8bf928ccc55f9230aabbbe11bcd5b2e2ab","_id":"react-image@0.0.0-7920ff8bf928ccc55f9230aabbbe11bcd5b2e2ab","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-h+hWxxnNUdQufD43PBJAAHbM36J5HDWbL1s+KJdmFzXkIQdxkizl9sJMzNbDUfbq42NKnYJMnqYBeaJ3GLkcsg==","shasum":"08346255aa7fdb0c03904b99331856cef17369f6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7920ff8bf928ccc55f9230aabbbe11bcd5b2e2ab.tgz","fileCount":20,"unpackedSize":38166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzdXQCRA9TVsSAnZWagAAMDEP/jBq74EAYnCMvuEspCRB\nZwn1v20FetV/C0pAE9r3E8SdmuWQ1Acx46DLzJNalgH2N3o1Ll3pJBHPQXOx\nnKcEP/seTXFWO65rwdLKA/KweHvtYsv0uknOI80VMfpSana09lBo9NGGaj8y\nxtjV5MSUVwTgZU+J7OtxbtOaXc2rquErqXA1BXq3mjFXJ8BsRMW2/NFOgJf+\nL/nDGVw82BwuyGVtOUANWBiFw+ieqlnf6MxSTenPapWyCQh9SNVPY5gZGrNp\nFPlz0/dCVVnktob4b6bBPFhLnASecF7HS46UkfrPKv2F6zKsysqkA0QCkmwu\nidJWSvUr1SgzKFk/YoBy9oCZqHXh3DEF4D6PSU0N7Mr7e7yRxOjgb74jPhnG\nCyChF+so8jTM/lZUMSEZsG9vglx0NvQhvhhW1Wz/WWNI6hE6kOmUkKfqciGP\nVk9r0Jtgvg9ylwwe3Pe/8y1pFzfkCAjpW3bAoYDuCXP7Vd0pBayggfBlZCZW\nxYUnl8eKaAxyPQ91d6iyYQYMs70C5RmD0+AsLeXKxXltPl6JMTuJoOWLa3n7\nMJBv4aLp5Au2EJSuiqzBCcT82AB6lnnb8HNpppU8e/JY3Ug2CxsT3E7TkAZj\nlIAy24+/XjWUOHpOybfNBbIlAvfXtT85+LwI6EiFoAqAmddCDjrpGVXkK7We\nYIa0\r\n=F5qO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICa93tlS4vnuraS6gznjdl76BGblWPpcYgJC0Fv0+4/yAiEAmXCgg55ogz2OhRdaTMKts0b70wwszTDXmOHUbrZ0w6k="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7920ff8bf928ccc55f9230aabbbe11bcd5b2e2ab_1607325135854_0.5720047166668503"},"_hasShrinkwrap":false},"0.0.0-7ef14e4b20054d5a4e0276fcf7206b00c5654175":{"name":"react-image","version":"0.0.0-7ef14e4b20054d5a4e0276fcf7206b00c5654175","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.10","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.18","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7ef14e4b20054d5a4e0276fcf7206b00c5654175","_id":"react-image@0.0.0-7ef14e4b20054d5a4e0276fcf7206b00c5654175","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-XenjwWevakVfZILJczAslFlXqX5d7kYOHypJtWt1m1AJ4tYlg3LUU6B4MTUhUa/xPUoQL9x0GAFW67BCemHzOQ==","shasum":"3dd427c8c25b17d0e8979b35b12a352fda099afa","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7ef14e4b20054d5a4e0276fcf7206b00c5654175.tgz","fileCount":20,"unpackedSize":38171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0saSCRA9TVsSAnZWagAAlb4P/AkPBgewaMJseJHL27U5\nx63SHPa7Z0OPbxsvskaEmHLWOzMRJXN5b3nrSyCCvTiqT4hDHQf65xm3y9a8\nfMZS1Kkr5VbdkRBgkZ0H4ziszlbCnPWDD3UTNouKoxhdBARVhSgkDwQYkBDX\nIlTMLeAHtpZ2b3jxWruvRM7M5Z/bpMBTqRlYgqX73n0iXIcC6bRrUfrqTtCR\ndDF4CLi8YcSOtyL/2+5xISiM27UP2yGQTN1vEPzjNNRBJcGHHGNO0UO1oU6Y\n7By9mWT+IIqwxlf7esQjkSPza+s16OZnyofvtll94cZJ7eWL2BWypny01g0T\nIOG6sY01hSyupKEjqqzz9Zrakv7scfdf5m0eReP5x5Eag/YIEKw5oG4PyqCh\nU+wriqsfEVGFLl9omBtY6MctGCRChqUl0zU7FF8xo/K5mSVe8FgjeTX4hgGP\nmEjSWEh6VQLO7zvKI+hJxg1dBXY0j4QslVAkMvfeEQspe8l9S4Zsb9RfFfkV\nBEcrmTxP2Kx+tKv+24nrtXSaRiCQuKtt/0qkhsUkV0mbuirw/jPeoWPqNF4f\n2VRMh+6NV1mGXlrWlZufqtUd0uqf4T3tMqMK0Kar75cL1hCmS/mEOty6h7cy\ngfuK0FccBE9AxAkHdGfewDVWTSBPtn7tNS5sDar9Rv2cYhSL9yn5uIf/fxyo\n0YRJ\r\n=bscz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdGoAGbixWlehsvwKziK+tMjrK3rFPPp1WcPU5cIE8iQIgHDShLke4Yejdbd5C3dpk/V+U/Vut9PkkC1hm4137Irg="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7ef14e4b20054d5a4e0276fcf7206b00c5654175_1607648913679_0.07782814752808176"},"_hasShrinkwrap":false},"0.0.0-e40b3430d09dcc9d6ba486f887db74c6d4b8e75d":{"name":"react-image","version":"0.0.0-e40b3430d09dcc9d6ba486f887db74c6d4b8e75d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.10","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.11","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e40b3430d09dcc9d6ba486f887db74c6d4b8e75d","_id":"react-image@0.0.0-e40b3430d09dcc9d6ba486f887db74c6d4b8e75d","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-uNYbJGrWMQwMspWx1C2lVk6BX9N87gyOfKAjaEtcL14UeHZmbMF+NFbsoGWSqifOMRGO+JfzttfasYx0aQVZrQ==","shasum":"ceae56592e2e34d7f4a32976e0be8349fab4fd2d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e40b3430d09dcc9d6ba486f887db74c6d4b8e75d.tgz","fileCount":20,"unpackedSize":38171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1EMRCRA9TVsSAnZWagAAf8EP/i/QQpkVge07LgQp7IEQ\n2dX9Ggk2LN3rJy5HBApmGblGPV3sSvm9b0Iv/XRA2FU1oW+Ckt0SAsXUyrdC\nQXT7WJWAuqtuxPU+2dm3DcqJJyT+otOl9u08e9cQ9C6pxoaOlyHJfznp10AS\n4sSpK9DNjCgRPH+Eemn57Ks37vS4g5dYe4pTpbUvo7k+/39StaghAPBqtZEk\n/oj1Rq+Cu45ahE7QH54JPfRdWZ1bJ2fsNNn2LCS/FVkVy2/LEjc+PNWpbvIx\npg1RkqixqxnyDfjjb0EBeSWi1pYdOwz5njI/JPDgzj/C1oFEZmHWBT9mSUK1\nZyqQbneo2sUAooB9kMcw7Tos1nRo4F3I+lW5G7p+4rhvIwuq9jeUc1gBXc47\n1oyy6DIzkPiepHhsN7SqNLAWA/A7s7oPeO0BREEAg3bq4JBb7YSBRSG2kLBn\nELKryOJZeVMxvpnI2fMl7vF8U1FsQp+vb2KxTISfyLcmBpu/r7Vw91qjPI5b\nDJjFKwmIjcoyRTQC+ZFG4aJEewdC6q8QJ1pvz4pCCBe7+WZHXupiaeE88aEj\nX0K1mND5eHJnw6reDU5748rYpBITNcn0tdWLzK8iWtSXa1bQQqmOuEs5KFcV\n3dnM9Iw0rnyr/1h+MQUnueVYK9fXxlTPoFtSWl1xBhKim4YRjOhBjNTZux0W\ngoI9\r\n=F4oR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5U1lAghwm3qgifkm0z7bCJXEfp8UU3c/ZRS79J/okIwIgF/O0RqLiTmK5Szrd3dM50G7A1vwnOC5MYT9zUdAxc8A="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e40b3430d09dcc9d6ba486f887db74c6d4b8e75d_1607746320691_0.6081681216157535"},"_hasShrinkwrap":false},"0.0.0-6af71192f18b10a678a4e71ee194730d806da2c2":{"name":"react-image","version":"0.0.0-6af71192f18b10a678a4e71ee194730d806da2c2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.10","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6af71192f18b10a678a4e71ee194730d806da2c2","_id":"react-image@0.0.0-6af71192f18b10a678a4e71ee194730d806da2c2","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-YapdHx7GgsKwTwljJp93UNeIeV3rgCJq838brs8fxL7Pi0jV79obNfDJaiNANYWO8fNJ8Bpx2FeSvhM9vOBMzA==","shasum":"3cbb113a974254f6cb38c0d9db71bc7afc52ddb4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6af71192f18b10a678a4e71ee194730d806da2c2.tgz","fileCount":20,"unpackedSize":38171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1bioCRA9TVsSAnZWagAAQHEP/1kSiYGJV/NS/MA4bJL8\nAeh983m6QdWXczdNk7IYhUr16PyNmj8l86eygzuCCJKhVINK3caDrCwxaf7Y\nexMGPuR4m8fSzHrgzKC4my7ea4E2tXORG3qMU6gBXTZ81e5dqKkQ4/QBFHld\neEzRt9n6g5dHj/d85RMhJcLA87i0nODh7hppsE/njxlCwQ0ioMu7Yh/FIUFK\nJjQEg/I8xDgwxrtK9X5LwpVz4qvjS6mmEF4945+lvbiP3jopJjhW/Rgm78HH\nKfLPfYKP/1qPfuRfauPCiibP+A5Y/a6K58lbjw7bkmhZ9TO4t4Nh0BFEakPv\nbDFDzrYJQVhBEM7jFaKo/1eE7zccQFlkSJOEnzXfKalvfleGyQ8rVIVKml1q\nvsCqe9r819vbjqpIc2pWst5CSupZFXRChGgsrqa8NxQcyfjr4t+ondIOmEfj\n/LFNYO3K0SWzdm7S78zgzvZ/JR0g74szGExGq2TXcg4BfeOCtuVU63IKp8Kg\nt8CQLLMkaqpznl8ldxlKQ4q25x1xevh6zkiK5F++lLMnMLQ/vywKppDVe9SW\n5FXe46QsvlsCi9YJJ0KDIk+sAO8PjnHweaZ+CKVJ+6Si8NG9tJYWwh/I87yB\nmvxVIbBb8DA21jC4FF7gV0+xE6TWs+LFbV41NsyHx1aXHGrPiwctxTGqhRs3\nw8Bu\r\n=5T0t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZyDfJ0n2rvi5rfiVZbQFyGigz8ekeUie4L06XbljI7QIgPYlP+HaG1VxxqEL2xgEggi1/XyYDUKbkpZuF7C0kIJQ="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6af71192f18b10a678a4e71ee194730d806da2c2_1607841960391_0.06375382705220844"},"_hasShrinkwrap":false},"0.0.0-836ea517dd18e6195c0665f5a33eafd970b2e465":{"name":"react-image","version":"0.0.0-836ea517dd18e6195c0665f5a33eafd970b2e465","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.10","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside for a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorperating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it failes to find any images. You can wrap your componenet with an [Error Boundry](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexability and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not nesesary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visable on in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"836ea517dd18e6195c0665f5a33eafd970b2e465","_id":"react-image@0.0.0-836ea517dd18e6195c0665f5a33eafd970b2e465","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-5kjZDcDkhewA+l1S+d8wJP4lRyY1JgJIcV2f4T8DW47wElAcBWDz1oGyZqjUHL85uS65PdjiE759VczM7d7aEg==","shasum":"24b64e9a1d191ff941ba2561f7939634d11d9c5e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-836ea517dd18e6195c0665f5a33eafd970b2e465.tgz","fileCount":20,"unpackedSize":38171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1eisCRA9TVsSAnZWagAA2KAQAJDKpUIHHsAskPfMU06l\n/2AOOdj0DFyNcNYiauTh3D7z6xn9nGal42MbbqP4Jpzv0pQG5/kZYwT3CT/Z\no0waHPkFTUuDMP6+nbLA5cFn/dcd5QKIJYdQZTVlCtHKyfsZTzRbRl6+0U1p\nfk7HXPi2fD0NQil749HywciPqwJuPoXfMYrqIu1zGARnW6OyX+5SVMffVAaW\nhfIO+S3UhTl/LAqpkT0TL3Mq/i0PyymqWwDmHa5DlUjfTRni01Sg9Nh17SCq\nS9icaxop/9x/tf00Qm9ui8EiC79dS42+/2huYjHp8BMMO6EkDWg4wmvz/o+8\nBAy8YJQ0/u4CmHXgITjMjGLJCh6HlnojlkOicQtYQcbVdnKZ1hZ4hvQ4wQxV\nWG7zjvthwC1lo/LqkZmQD/adAEgN8ZIoP4FIZKepLldQJ3ldTTY0IaTYBjdp\nsvE4QT/5gKBxBFclIl6QsXQeo3Wd1JJYIuEg5+VW0U74TCOpk17ktx5Z1Xrz\nE+a1cHjjUm9sy/pjeIHp24Au7WnsxK81/zvCa4bvSMu5r4k9JGsfROmIBc1A\nan9LZLuVnIvo0oQlW5o2u0sVBkiY39jfU+yOd4zjSYF2EiOIdeoygZz1JSFo\noScmOIAoVanEeBmA6sQ1j3dg1GD+oZv92PTdcJN/8Jy+nJGU5ZC8x2YAvU/M\nXQZ9\r\n=pwdJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6yswM4DIFXk0N7g1aL5H2uL6Ho/Cb3hZ3RfBR2ffUSQIgYv6hvIo5Xr8imCr4/Jx3gO5N79nzhcD9TdpbpR4v0t8="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-836ea517dd18e6195c0665f5a33eafd970b2e465_1607854252150_0.326826740404204"},"_hasShrinkwrap":false},"0.0.0-0bbbf9c47df2e6892ece3c52261f7a49b0263be3":{"name":"react-image","version":"0.0.0-0bbbf9c47df2e6892ece3c52261f7a49b0263be3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.10","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0bbbf9c47df2e6892ece3c52261f7a49b0263be3","_id":"react-image@0.0.0-0bbbf9c47df2e6892ece3c52261f7a49b0263be3","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-5in1SZ82dzNZKoSvOJfEJf5lzm9pMJuAL7+EuQk+Fhxb7twPjpMuMXRZ6H1Me+xwvEN5TdnMy1iBF/NCTZKx1w==","shasum":"d4de68d68334cb5bb6a365f40d3ac971c6846d58","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0bbbf9c47df2e6892ece3c52261f7a49b0263be3.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1kXXCRA9TVsSAnZWagAAyLIP/3HAFswy6XvLbIWcE3rR\niy2l/fziGm41e6bXhNIEcRyL6KMWQrUlZXJDtFhSKwhDNlOaCVpS/zujP78K\nHSL/lZFD8vgnUraZJ0pDZj26wIty6EAJ3FphKRCie6cKQkGjb5s0m/ZgWl8N\n9209RczL/3A2rE4wyPGu7MovR1c/cuUnI3NfggaOZenIl/RF5KrA4miX2714\nz32u0YYFkUt4Jul9oB9vk7Y+wiVzyush+y+x1zVCHZfFSTRFgIkqQTkVjXMt\nciHQ+dIqyqVbGsc0BG1mojT/Umiy4YlkhPC/C/O0CJeInQ/VD9ZmipCBDNmU\nz0Uu4lOYuQPzKY08wUCaS9Sg0rvZwwMyO5KXwvwTPzFS5BfyZ5UjpcRhbpBm\nFwOuXhGvWD7FGW4HMx3bDPqVBiPTClIaHFM8lhSihkmwTwQGWxRpd4T8rTrS\nrQ21rkgMTBal39m/cCdGIo9MW5z+3wUuSPtv2ttO/L1N/UdgvytFqoM+dTX5\nYmiVDyEx7S1XKe0nfsCq09ZOlf7cfRjtjQIH8l1/90dYONICHDMM9geP4sfE\nK7+jpOTHocUTDqxboxI4XVGb6kD4OitrJL7DVA8ZBCWJTVRGIqgAsm20nB5w\niI1db6tuF8CVebTyKxbZdafttlPbx6l9H6sRugGAgE/Gp4+me5P7+RZkfZno\nRuim\r\n=P7Yn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuSAmH4Ivekicj5v+LRpGrCzZop+QPd9vM0qStxnfo2wIhAKPsu7qwzNfe2EG8N1jwrq3jVn4EQU6jSpdV8ruHykGV"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0bbbf9c47df2e6892ece3c52261f7a49b0263be3_1607878102846_0.27750831298523626"},"_hasShrinkwrap":false},"0.0.0-3223ed02b8bc0f21bb95f64eba70acbea3e679be":{"name":"react-image","version":"0.0.0-3223ed02b8bc0f21bb95f64eba70acbea3e679be","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.10","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.1","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3223ed02b8bc0f21bb95f64eba70acbea3e679be","_id":"react-image@0.0.0-3223ed02b8bc0f21bb95f64eba70acbea3e679be","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Qgyx/u1/vM4yrFjOupCK15Cb052+P8nV+vrBTw/pkA8ZGJHTNR5zomkm+0fTgXIm0TFalD4qguT7Gu7mNK/JVw==","shasum":"fa62f6712b905939f15f611a56891c22da042874","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3223ed02b8bc0f21bb95f64eba70acbea3e679be.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf186NCRA9TVsSAnZWagAAnBcP/iAxhDeQOuef86ZUz+ip\nQ9gH3lzARUPVZAkqlIZwwsAbRN6WlGNDQ4FWfj/Oif2oQDpzLQxbT/yftlFm\nfQoD8VEzuq+2ritLOgtmkXixkM8GTgNG+YEsrg5XKh+r3xmn1AgnIz1rzKic\n/0/UP/AJ7cLuql6QbE0jO7LwnOGzMzdEWGI+HMezU32YG1Tqh1ijJahanGgK\nwB3vMrlGXGSG/4xwWj06zmtiQrrdSsjipwjRHgPkG3uu+F7INQqZ1pv7ndi9\nVnLo6BXT1l9HBxnF+4tpUQVpG6+Lt0OM5AhnwU8Pz5/fiCkoOZZrWeCzWnsJ\nww8wHglBu1ymJE/w2td3VRd53vBoTilSpxf85EYtEzka4aCcwXRiB9O4HJ2x\nZOdrQfu29QuWTQy4Q5xssz506jrxKK/f55hFweVNXbv3znwAnPy+HYEXaZjp\nJzkrdMOpGse3FHHX3coXLAIXrKlH+B4eDMAfYdLFANUkb4V3Y9X1n8P10AeH\n6HhOt5VGQyVHDAxny0lVmtIupHPGfpdxaQ0JEabJ968pn54n2d6BKA662z1D\nEaqMKby8IQwE+EnZrqJtlffcQONJF7PJ7DMOaoGcT+ypBvY7OSn6IVTypP3l\nPg9upc9LcWazAAkIBUj8UZmfJI/Fg53yTCdYUU96aSS9xL51y1XIz28FvL/W\ngGPf\r\n=HhVC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKGhX+EOx20sjsSbJtjSLQKCfdlEmk2bN4QQQIlbWwWAiEA0l2IvU3Ew9TbP5MsMC5Zz0Qda36UdoqCkzlNO54F4S4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3223ed02b8bc0f21bb95f64eba70acbea3e679be_1607978636751_0.05242513512814151"},"_hasShrinkwrap":false},"0.0.0-cb9d95edec42c9dc3330995138897848c7180f96":{"name":"react-image","version":"0.0.0-cb9d95edec42c9dc3330995138897848c7180f96","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.10","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.34.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.1","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cb9d95edec42c9dc3330995138897848c7180f96","_id":"react-image@0.0.0-cb9d95edec42c9dc3330995138897848c7180f96","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-S5ql+yix++rEMdA5cGAN6AamsnyCnnq1GfNxBsXY4lyft00VccROk71k0R3Q0bnAouvNP7XCBHAsbG3h4IXd/A==","shasum":"e66bac1e7af1c8b3bbee4cdf167d52fcc81f8aac","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cb9d95edec42c9dc3330995138897848c7180f96.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2TrJCRA9TVsSAnZWagAAU/oP/1P1Lxrb01/9w+m7/T/3\n8U1EgmMnbGIDz8zo1uIrJ4ZsdcRl7m2zHkNJKIOfFSvn64H1icS/atHSGHCZ\nWDguxnJaXTxKGa+U6U4Ec09+M2vIygWCRzqiIGQrFp24jFo7MAGe4r4oRxwA\nIGIty2XXiJ+lo1grX/mQ3yos/+X5I+wgYrob0jcHqF2MdsalTkOqOCpoAEDm\nQwh5T/ehaixcNIzB3qcI+heVfAiPVSuNm5JWUlSoN1xVmN6BI1zaYdElPjR4\nXkmMXY7f5jfCAL4DaRBziGPNR3gQpjY0OXFs59VejaifgXCiGfHwnToVvw7k\nwNMJ1WwA+v7c2hKm+i0iJSPQbLl3cwVZB0jvxr/quogf0Lhbj/1e1sLOnWH5\n247PL3SCIQHXw75vfRQppt36IwQQXEjI8M18XB3uzdqTMz7tywUElbkeKje+\npgHvd/1FLlHopjG/z8RYWx4EEVhSANZixhOlL5xRHbaKjyEHZLc4nwDu/Qeo\nGq9865uuhRLVnI0i5ZbWM0InmXQ2sVmV2t9aEGWklPjDty+NsGiJs93UVk1Y\nQeWV772uKlljuE2txFulpFaU+BOJ5psUdFaO3/M+IhJyN0kHZ9/TwQxVNg9X\nKmyHphUiuqrGzdZGz1ckn/a4S1F5V6LA7XscHU//MFNFOXXFUiae6AcrjiOU\nhz2J\r\n=8ZGr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWM4unJ2/azlgJV+94UW7FZ5CnO6Or97WAtZzTxMJh5wIgei8ajGX30Mi7TFkugaduOgpEpyhcgF9KuB8yYCiN8k4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cb9d95edec42c9dc3330995138897848c7180f96_1608071880653_0.36294018968875763"},"_hasShrinkwrap":false},"0.0.0-8928abf7c6d658779912a1ebfe08727aa42fc2ae":{"name":"react-image","version":"0.0.0-8928abf7c6d658779912a1ebfe08727aa42fc2ae","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.10","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.1","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8928abf7c6d658779912a1ebfe08727aa42fc2ae","_id":"react-image@0.0.0-8928abf7c6d658779912a1ebfe08727aa42fc2ae","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-DJoY5cH5KIQQphXdYQ8KXkYPOPRuC/GZtX2THa6bvfbYklnpny1LFU3ajHnZxJT9E3jN2dBz4YKtLBCCAJ7WzA==","shasum":"7321585b8db30465d9012000a81242c3ec3133b0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8928abf7c6d658779912a1ebfe08727aa42fc2ae.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2UUoCRA9TVsSAnZWagAABPIP/2kpKswxM45cHR7aKXLF\nRqzja5i2QpM3tyY3RJ65jybxh3kJIYHdsibKzB/z5cIHcS0vOcj2+FVJ5uUI\n9MoatQvPmyIJz0zxC1zNWe+QWD8YMSLrPz9sbXVgWIBrAfhoB7yq9X/7WcjS\nLM1o9D0JwR1Mc1gn4k8vWVAWj7W+KHiQs+IXGFNhY1O/8GvpP82JUwONsslx\nua34+391/zp79kE1e5cCZT+hyFzP3XJ8Pl3k7S/wHKcY3ajPrfbJYdpBiFVn\nUyzA/dS5OiAPMuOTl4OFpwfY6wtv6SW/ARw77RKaSKFxogJnBeL2MmwGAyIB\nIT0SE1uXg+4ef2Em9kKyEMCN7k1TRBuYxJ5+h+VYWhzCO78xIqBmu4QPBwUH\nue0zZ4NZfj2Cj8ajsEmPMgBYVrpnxzErNq+RsKyePEklj6wrsSaGcUDtA9w9\nGQOYzJrQ20in+vbbHyupLFaVFzLl7LVxl5j0A7jlrwvTrHI2feWmDaXR1bgN\nYW6yhXV415mJwT2ZIpiclsh1DsVetihBGLC9DRI316IXEPBGbCmIxnOrK6os\nOsyPOvziqRzGGfF+xjLy2eIH/5iBBnmAKFR98K/nGiVVrEGf1K7ybKlzEzKU\n93gifCA63FFAmOan9s7Faf/CuSjlAyiXgSiIWEF1SkPiv2csXB9Bve51jHxG\nQW4U\r\n=c27f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc7i4jKSCohEx8kNs+lRTCN5BKVePiatC5x6OkV9LgaQIhAMc9V5/XnN4/vQECHV4XIqK9ZjxkohYgmQND9rXfOAp9"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8928abf7c6d658779912a1ebfe08727aa42fc2ae_1608074536078_0.4856432709816423"},"_hasShrinkwrap":false},"0.0.0-ba073b244d07da42c088fcdb0994133428e71bd2":{"name":"react-image","version":"0.0.0-ba073b244d07da42c088fcdb0994133428e71bd2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.1","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ba073b244d07da42c088fcdb0994133428e71bd2","_id":"react-image@0.0.0-ba073b244d07da42c088fcdb0994133428e71bd2","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-snWJbYgMf7pzm7Oo7EDx1naSuXtvIiOm6DNxqHXDW6lyQbHeDW9Gfe0V8wVE0rI+mkep3TXy58F9UUaJVUqS7w==","shasum":"145620016d7d4bf336d8774a8798c2c461f7e050","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ba073b244d07da42c088fcdb0994133428e71bd2.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2sInCRA9TVsSAnZWagAA1oUP/RU1+WpWU/LMhMCuOI2l\nynTxKGEo2qHScKGS2JusJC0jayb+DVYgn9mYZAG+kuFTW9qlHAXTDh909Nrf\nuiBEbqgcs4D+fgSaNxRvACbrK6A2oNocYRpTul24KZpNyehcnmG2exGcPPG5\nbu9UO339bUxtxLuXs94QfzR5JJLI+4gw3sKqp7KoPe2OtBGKjBgLuH+c+veE\np7QCQgyhmVmKQeXMdLhfGQxgGoUNozhZdKW+lIzRR62AP5CYqTCdm+SPX2Mw\nED/nopg3cApqryM3lQ/gf3H7VEGXMq5itiI2dbg007BlWHGrY4dwjsT3jHeV\n/CZgZ/RJDIUci9fsXv/uuxLCKtZYP7sCUS2jLat+PNAyHpocufqRwSyKkOQF\nh2QGDHCnoAGpturrdo87A0gFw4lkBKf872YVQwdiFC4PP+XBxYqn/+Ai3xZP\nrJeLPfCq3hvwyUY/IfgJsMIKdNUTu2Zoc0dNG2kflPI/80H2XZOExVTAhfg8\nGH3rvNyEaOWJ76pKe1EBNCw+Nqckpvpq9QwgTYWZPUOXbMSV0iTrNzOKoA17\ntByoQXFeZUiPCj8bKJq8TcjWVd+jwX/HMwfm9AzY7trVHzPOMKgr7mEnQ6gd\nzbQIeRz+TLO4C2FKdDz0HopIVVvWFstsMV643TR/OuxbbNQy5qAMGBwPMsgg\nNfVQ\r\n=96G9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpUYZUOh6TDi37tqAwjQMlhKRmglf9bBEjzTnjKavbpwIgTWTiSqq0EcKxtvV4NhJr/+ulzzub5enss3aoAng8U24="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ba073b244d07da42c088fcdb0994133428e71bd2_1608172071333_0.5048470452687539"},"_hasShrinkwrap":false},"0.0.0-c3f4cd68e2ccf87bca51514cbfd5fcb9b10da6d5":{"name":"react-image","version":"0.0.0-c3f4cd68e2ccf87bca51514cbfd5fcb9b10da6d5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.3","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c3f4cd68e2ccf87bca51514cbfd5fcb9b10da6d5","_id":"react-image@0.0.0-c3f4cd68e2ccf87bca51514cbfd5fcb9b10da6d5","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-iNuGwkEOxMqHAsJpI/Sw4NFvWqv1RH1v2SHyPudURz8hW+a6UwTxUUqDIyyknH+S0lRqH9nd32HVyzhFTsw2YA==","shasum":"0f5e7b2e8d629b041543ad1e9d5ce6ce82365abf","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c3f4cd68e2ccf87bca51514cbfd5fcb9b10da6d5.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2txUCRA9TVsSAnZWagAAk8oP/0IyarniZgseGEkUwjob\nx1X5xjwoTIQ2TPCFuxjlMlhcxoM/54R8bGzSCSbunGjlC3x3UrpwOxXzInua\nWAylTAbnoJoYC7V+Icdg+Yjg4j+GfWhGJt084AVd0AHvSRcj0j0rhzgUtr6W\nBDbxwCUU4/QVcawuxsY8WXOBffV9jQmKlxVny+ZaFveNw0GWD5MwBrvwFv8h\nOPtug3csVoBMurNiSSriyorQ9+DYmeNzfPCfiGXjpIqhCONXjZ86uT6QS6kk\nmBJaiT25hM0AfbPYOBrh9Fs5h+da46Ul2cefGn2J3ZrDboEUOPYmtCPkn39o\niMtuOJVGYVpkkU94AWqtV9jsyMe4BrgjFxrTK/ezP7QFiXaHof+75WWkkMVZ\nSgvbAYcPXVjgnVZrxVFVUeuguMbGw9ADZrurN7HxbQsO2u55Bj25KAKJApXn\nYZKyBOMHf7DWnFlYqU0ZqqKvKT+Dz2JEnxvfiTITraeCxdmZEiExxGeDVrjG\nalMFQ+TWaJh32TzeQRzZKEzoECWNA7nx4fEr3O7Q7HDFr4w/9LWxbtVE8ZRU\n/Ov0O8vn4aFysnVyR7hYU0k8E3MlXgnqYopbzJH3Tdh6dVSxP/JGPt3CXT7w\nHxteK2kBwOxckIZp71gTwifpSBcb32Qo0f4OtvQC3MIM8NFOe/lj4xGgp4Y8\n3z2k\r\n=qS8D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgSjINRvZS26mu4IDnLEFV+tKUZXEmu3N+grR8iyLxMAiEAxBAKUQTrUj9P2kExnddxcj2AQnskMdTsvswpyHH9Wqg="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c3f4cd68e2ccf87bca51514cbfd5fcb9b10da6d5_1608178772491_0.10328705889730938"},"_hasShrinkwrap":false},"0.0.0-cc8fb7092bcf1bf16f42c16c2ef82e08cd9af402":{"name":"react-image","version":"0.0.0-cc8fb7092bcf1bf16f42c16c2ef82e08cd9af402","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.10.3","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cc8fb7092bcf1bf16f42c16c2ef82e08cd9af402","_id":"react-image@0.0.0-cc8fb7092bcf1bf16f42c16c2ef82e08cd9af402","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ZQ/YOohGGrkFXGQWnomC+grgzkSE0DMNzTWSvVC+uGRB6YTEPwPM5ctCvKokpYUKT6W2EZajQWqVX8gdasn79w==","shasum":"b5eab9949ecbe5983ac379ada0a9fd15a553626a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cc8fb7092bcf1bf16f42c16c2ef82e08cd9af402.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf3D7ZCRA9TVsSAnZWagAAAu0P/1L2R0hgNiHGxKYDeoTg\nyh9VY9L3DkV2OJ61khQRqQzxs/cej/NKX5OY4sFidIBFgDyQ1SwHNygupNFs\nKiTdFU/p+tQQckZvAlHyJ2RTY96K1fp+bHUYQNyVDgdOIWZMTtcoaJ76GIIQ\nJvpRDnSfcaIw2CwEF7cVwJJn+Dyf/UKX4DZRf/YDvTx3nH96LRv+7oarAlD3\npQflakA+RyU1sBl6+n9EWKlfx2WX/FijqrvblNE7H35YOi0JyrEfxuruug82\n5B4QH3rmV8xwE4uFDoE19jpEcVwnsHMIHjFJypxZM6LQ4viAnpqgyuPPp6AE\n+80nOotosGW+hhewRLM4EuDQlkT8hdK2d3cn7mhadcbqcj0xYud3h2CcRTft\neV75m/hWlvSZ5h6WHE1PhtRr9uoSLYVVAzbzKgTiMB/M68uvddwU8LT2RKox\nP/RhlpRbVdJQm/5akRF+6JMZGTOoTYcCWcWEwUICRgtfD2apkCzsXnUjopEE\nrJ7tuq0vr700WZPlVfDGhitOtIrs1Pg1QwPVoai2Rm2mhEaUvyER/mIZjcmL\nOFvKyu3U3UMkKkuqZCLy85gOStqZ7PSVbf1vRY9JCAGhQMdfoZE5vkF8BHOv\nHbeah8bNBQ63c5fyQH9ibQDTj9Hg20kVJ5LlobehWeqkomgfbgArB46O4ZAP\npmyt\r\n=gUYb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZl577tFmhovzFYc5d3d3eol6a9ieSJBQztpPO1GaK2AiEAgRGx7zLPwbGNnakiTqh8HuM+LTvdg8vhCRkWT3GrMFo="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cc8fb7092bcf1bf16f42c16c2ef82e08cd9af402_1608269528912_0.5980069976735287"},"_hasShrinkwrap":false},"0.0.0-b47d52a46093a3d601d6737126af936743ae860b":{"name":"react-image","version":"0.0.0-b47d52a46093a3d601d6737126af936743ae860b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.0","webpack-cli":"4.2.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b47d52a46093a3d601d6737126af936743ae860b","_id":"react-image@0.0.0-b47d52a46093a3d601d6737126af936743ae860b","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-18EpBMEaYNywuMu39k+5VH3f3NibJ1gDnmaNKDW9d6mMG9D/+L/Y1m7L9rgIyLUWEb+z9pYjTZNvuOtjwo/svg==","shasum":"06d60f08a3b7d5448d0328c99953479c7c6ad632","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b47d52a46093a3d601d6737126af936743ae860b.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf3a4DCRA9TVsSAnZWagAAjmcP/j3JFnMhLuezJLe1AaaL\n1ox+DX/vwz1XyWuniGqZqi/qZ5iycUxLlbu17MWSvrL/H1ePu+WXWl3BZMDg\nZPi55xJge7qaEcDSUdsuYDS1FF+0R2ydMBx5/dkRVEJOClUivjaSYHDWbteM\n02ZvBZ4phj2EIoSS2DskzvvRp46Hfyg25u/8VU90ArEhvPgI/1ap5RWetTRk\nei66KnIn9W7uwZIDBrk49jibDmPVXCbeyPtHMYP8twt/awc+Pr2jcVRxASFw\nv/1ISSTUGx6NPsBd+3VdPKOGW64jOA2jI4ENXi27V6Wrob7PI45zp5cYo0Uz\nobK3BVA7pSw3tBbyNnvyDjicLm6tgVqAUA8v53hpOmgBqtPbSihlI+VL2+Pc\nfaIVbSun4mznpZnZ33KYVUhdsin1NLAZC3enftYrDBMxcMnZrEOweuOBJPbF\ncS7x/hfd5TTIQvnDBDH8m7MaFR1fhgQzTqy4eM5xQYSooD6eSB2oQcDlkjTp\ndfA255GoZHzH8sCok+/VXgSTPYnFijYeNKmvcILufytL7GtnmuytyD4t4Lkt\nJxWRgSlajs1OVBmyPcz2ky1EW/qz3WXcAA5z249kjMxZJEXLf3FDI7kxQzAo\n/9qzH40+jU/t4jRMOQLC0+LyBZlS+ilV3DPGntBwuKcb+jjksqrrSC2p7DUi\nXkib\r\n=sqnf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD15oe+/8scsfmihBT+RNh3MnrT/f0jlQJJgApFCt7//QIgaaKfJ8JwKqZOFh+t8sCv5oQ3rXBQRfNV7kgZH/aDLWw="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b47d52a46093a3d601d6737126af936743ae860b_1608363522947_0.7859396429983134"},"_hasShrinkwrap":false},"0.0.0-f8fbcb4061501187aa8afc16d572a6cf3e4dad50":{"name":"react-image","version":"0.0.0-f8fbcb4061501187aa8afc16d572a6cf3e4dad50","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.0","webpack-cli":"4.3.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f8fbcb4061501187aa8afc16d572a6cf3e4dad50","_id":"react-image@0.0.0-f8fbcb4061501187aa8afc16d572a6cf3e4dad50","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-g6EifBcTUS4GrGP/tB4nNUoklQZZ4bVzWJr8CtajQO9qCoAr/4jlKNyyltvGDP3y0ElqBUegeJ8OYp9ScaHhcw==","shasum":"2228ce44f8b50806b9977e0c8c28a3d5f81db1c6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f8fbcb4061501187aa8afc16d572a6cf3e4dad50.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf56eNCRA9TVsSAnZWagAAW3YP/AmmPpEjMnA5MoBorFh/\npJOpgUkc+4msNqGa5ngx7JMNf8fVYnExj1nx9ofxJXGz/F6WvrNCdRJ8U6xZ\nza+1nbmxQSdlOKvvkaFRITHb7LIXpns0jg7Uj1DrY41txTjS1cY2lpjytOUp\ndnhilb6n9T6x7LXWf+egHhbT7hoSapN3fgVPKXLt1lfot+mGBhPAoMmQNLEc\n4je3oGLn38z+9v+dE0EDpUL6qcWYjFuFjBlJltJV+R3Ol2BrO7w7BcglE+Ic\nzMC86x9gDXs4JGRo2RUGgB/edpppkjbQPPnr0FDkC0z/tHgBZBYmSZ8zOkam\npff12BrbJisa1YRZBKePTPAfH7RD/CldOG4U7dX/zpZzC674aE7rMT7oI+SM\niJOjKhcfdfxAqMpUgtO777cIWlZBSIlgK5frXyVwI3PGuggkJ/qU3AOm0EpV\nOV5Yg+xqIeMWGJWstsqKrVlAGblHrsLgTYzDM1Vk5C6S/Z8k5B+aipKnkeM1\nfxnUOiPsNIlfKJ7VcolSZZYOXFeG2v143ypZ3VmrCjM4tw047RNM0RlvGwtZ\nc3ZYTb5HvTw2Ncn9Qa4TO0wPkFz0DB8VljfSK4vq+WrJCBlPm1EF6t/sSX99\ns1ZBU2ky0nD8hhiBkBneuvhpSU30gP1nisZ0lvkbKAKeokh2ljZOE4YyrXm6\nWP2v\r\n=VZP0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCm4n8Ry2Wq0EfqV+bAL5I19TcGT0s1zYlJhJ9/USUNAiA4Pc8iJKfnl/gmhDk6uvZx6mmbDSwzqaOdNBopJ9QOYw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f8fbcb4061501187aa8afc16d572a6cf3e4dad50_1609017229147_0.5653122276212905"},"_hasShrinkwrap":false},"0.0.0-2d6e770ad48966772b8a88c6e3a0822c15be1d80":{"name":"react-image","version":"0.0.0-2d6e770ad48966772b8a88c6e3a0822c15be1d80","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.0","webpack-dev-server":"3.11.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2d6e770ad48966772b8a88c6e3a0822c15be1d80","_id":"react-image@0.0.0-2d6e770ad48966772b8a88c6e3a0822c15be1d80","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-IFeJKnl1xHtOA34mn5050ryFC8UEpkvq2IQah8OOJuz3cPD7S2og0y3ZBm733QMrhUjG+rgC7NmvWXhJaiQbgw==","shasum":"4a0de8967eed8662c4caeeecbc2985c1e532e5de","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2d6e770ad48966772b8a88c6e3a0822c15be1d80.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf65C1CRA9TVsSAnZWagAAj/wP/iVR9uAMPyoYSim0FSV/\nkzLCJ8qom8/d86s+I4+RS3Qnwh5GwiGSQrXGqt8mGUK4J5haepRiJe/HFgw6\n9FeylfzeBMULPKHcQqvC+QtFtUrMyaXQg5Ahw02pk2UnkZknmazfTPK+K4KY\n9SKJeq/ey7YQX7ZE0mJpzaOuXABDzkoGYsMsxMYPrQbkvP4BwqwbhYTLWQ2N\nMMUjJREnMCuOm2OCBDMse8qpZ16faJ6LZ4XSVuDnNPee029dSvgNa5U7lTAJ\nupyAVtGoVZEykcMjgjN4TTJmy8wwIRnsbMaxU2gnOuPjuKorhNlWGBTpQNsT\nDlrZ/5I4TSxa+tLIfflQyRUbU1LQxkUG0M6Wj3D8C56776UEc4RCuLPzC3xg\n/EaY4ZVv8Nvj66839RnvovxZ/VyQzdCMS7wfYNnsZ3Uvsi1vrausHg33pa5E\nP/DibNFlptt2dWMiVfeBc+Gk27TCvGv5YkM1cstU/0fW7U546c5zOK3/HPVN\nw2FERobbCRwldix+z4+bxaGEtq5UUmxxHyoyd6mSni7mYpSaK90h/Ra/kryC\njJ2gklHoh2mV6hyY1YDHAlRJBPI7KDLMdYte+j5MhvGYIM7KsYHpmr3ucmgI\nFYnpeibfrV/EEKUqjfzezdUUo73Ws5LlEv4Tgya9/ZeTOFaPyqDxBxEe6HMg\nV/0+\r\n=Nskl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXmov09ouWS7RIEoh1euT0R9N+Vhes39F8FsumemXFLAIgZHsqJLh2PeISVYHk9piR44VW4myzVxD8TPXEfUl+PBU="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2d6e770ad48966772b8a88c6e3a0822c15be1d80_1609273524511_0.667148926998921"},"_hasShrinkwrap":false},"0.0.0-15159eb80e6201d4c473a05599248ac524909292":{"name":"react-image","version":"0.0.0-15159eb80e6201d4c473a05599248ac524909292","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.12","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.0","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"15159eb80e6201d4c473a05599248ac524909292","_id":"react-image@0.0.0-15159eb80e6201d4c473a05599248ac524909292","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-XMq6Hfo7UHCOZqV/t5IYBSCx/1+HCw6/Nz3PFxPwEdIgtPM5LLMPna7k69mjd58TA9YMIuB0NueMc6cK5SK8xQ==","shasum":"6119e074badc265a60a01cc0bcff953433d8ad33","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-15159eb80e6201d4c473a05599248ac524909292.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7P73CRA9TVsSAnZWagAAYUYP/RFA+qENS2E/F8ZGv9cS\n65Md3i+nvEBz1VEqvTxqKRBX8L0TwXErZfL7KXeyXke+pyxFx/jucRrJ4CfP\nsB7tj8RFMlk82r+fWo2L8yhqSFMvQlCwPlQ1+3433vrU2s/VfkPzIiK5nNkD\nDnUlpTSxhuI4kpSr6WHFQufIlMpYFX7oU17lsqTNfTxmsSnzu7jE3ZbMkFFr\nRXi/y5LejtGrqMZgr60uitQ8s8WzcvqnnC5aRxvxz093Bm3iXtH5oKWq1a/U\n3G6V3GQCnG2qeLk3G2k90RzLE38D0htrZNkuepaYQwHFgGHLgy210+NoA91w\n34uBYR6/iHwQ+mcO1rTJeOj5rXUUw5jpMori5eCV8vq5j/TSeSb/wr5cOVfK\ny5LOl31wBej4r+/7Beg2CpWj9qbm1PeGAbt+qw+je6j+4Z3EC4zlE5hzZZvd\nLhYrE7XGOcQaOGMbXepHQfKge/lzPGMTgCIMO0rLFgzkZbTa7BCI09/BvR/E\n2n5Cr1YocCnEyT9nBCKwDmwVkq1lNHyyWrj9JgqW32FM5SlDt05S2lIoXTrk\nfl9Yzp0gnQmFQhc5JBBm4cd8zARd2clcwaxMAHHdeXcLB8tgOV8EeyI0K+fe\nQ6CFp7fbu24qRyWwkKsE8ATd+YZbTBTjPazcxQPfTSVhD3kHvHCTIroD2dZ5\nENiG\r\n=I7K+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICG70RumGG42h84udvSb69MEn4wqGAqFXwf9lHMExnFpAiEAn4NTQmIXitiPFXKYx+ZcAUU/fv+hTSz7cbEACTJ/sgU="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-15159eb80e6201d4c473a05599248ac524909292_1609367286782_0.004776419628449213"},"_hasShrinkwrap":false},"0.0.0-48f496391f156ab4818cc78e613d23e869531991":{"name":"react-image","version":"0.0.0-48f496391f156ab4818cc78e613d23e869531991","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.13","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.0","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"48f496391f156ab4818cc78e613d23e869531991","_id":"react-image@0.0.0-48f496391f156ab4818cc78e613d23e869531991","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-FcJsPjML5WOXe7wDecYVZmvyWRMIvZHoDV9BlwGC9RM2fXd+7uNvPekbS6IRYS3BrL3h2/VnuXlxnDLIMhcUVg==","shasum":"2c9577ca4f80a7bb2bf2bc862f7bab4029052dc3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-48f496391f156ab4818cc78e613d23e869531991.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7usfCRA9TVsSAnZWagAABhwQAKAUylTd5URqncd4TjxV\nZWlgfcR7bYCOetGVrnHcNcQm6RRxtTUw2gDGmd6ydzWM37iqxKdnALEOoXRx\nIxV4f08RqDXwuHeb1LwkInd3Ot8s/uFNrZ6bgC5Gc46Fey/nDT3437iy+DQ4\nGtPE6Vl/izRBJ8OEDVVoG+f88x0n+ddtllbmY+MXwUM5QyrSbavTq6//hIaq\nPM6igFWJAQa0BBQ8x1vVNN75QlBNLIckEDLRiMZZQE5e2VtBN2+JZVHUaRX6\nDQyT0jVfOs/7OkWchkc9/StIZi9gSpakE0vqOa9FIKZwFPGlFDKoXDeII8rM\nuKJXhIhQucTXVpokGl0R3wedHBsSrzh1UQYw43QOWIrgso47ytBWAu45Mawh\n+ycgqBQqahG76W8oP7Ccqw0kCvJle3muPpI1c+D7N7Z7fExZAXeacA67aZjm\ndRha1uvvbv4ege7a3mACBDdyg5siTqZjCBgPwOyrG8TJkBqgEX5rvFAHpBUI\ndBs5NRH8AOkMa4hCZ7OWDLDEbi69PWvpbhnaI1uclhb4jBnCfoP3HkgAvvnl\nH7nJ8Ceu8wLLI6kLAhELhUyLCVJxA+yhUVllDVCYM0ZmQ/V8k9p0jvGVgIWo\ndyp/sgJkHL9ac4dcaZ/6swd6fVB2VuWujkQ/HSEJ0oKsZ2QkKKuVBuqLhMd8\nP32o\r\n=mPUm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQNRVv87hRxGV+mVQ6dRhsiH4wejoLN11j+akaWH7JgwIhAPIU03xuBxeVIO3iIHR9PJtiCZfIOXQlsbyzGcKoXHvz"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-48f496391f156ab4818cc78e613d23e869531991_1609493278821_0.0775020144963543"},"_hasShrinkwrap":false},"0.0.0-b44e752ff6da92a13718f1e96de009bcda4913ed":{"name":"react-image","version":"0.0.0-b44e752ff6da92a13718f1e96de009bcda4913ed","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.0","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.13","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b44e752ff6da92a13718f1e96de009bcda4913ed","_id":"react-image@0.0.0-b44e752ff6da92a13718f1e96de009bcda4913ed","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-zdy8dE1lCuTYhZgKj7PeDoBoivB3wIVRFdG2QrY+dZCDhhjIICFi0v8ZlzSrWLE3WEG67PfVCD0r45TrSbHxxA==","shasum":"13d876ea2f365534d4c9f194704a8cb0120b1521","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b44e752ff6da92a13718f1e96de009bcda4913ed.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8FXgCRA9TVsSAnZWagAAAh4P/R2I1u4mEoNto7m78mME\n7BHNpxya6IORG32UXaA4MztQ9ly2QD+J58O5WlA9HMLIZN55rnR8Ba8nht15\nCswTuUYx46ZzbZHCbj0sNdccbFBiZlZ/2vFhmOoyELBrSKlT7w9ySpbXvkra\nMqYGx39UyK4uS2WUf77kFeaqwmctTi5xYpxeJnniEEov6x4EDXTfKuGPt0hf\nK1rxI2XeEKvZLVO9e9xgZPYnNyvmcgVjDBRAj96IgfC3CdtjebdVCMoLQGdz\nenTRlf0E3xX8EHQRl7odz92Sh6CGWuISzipn946VPR4dfiqrvnLTbmfqW1a2\nXuW/EnnNNH16adJIVPMwFUDacri3R1QdAoSP+oranTbtUnHzRfLUn/2NUs1x\nbdaX0pJvqti+3+6YlFgp7+cqTjepbleYTLRIV20VSVLLSk/wxuqUHEx/5EKm\ndbmHODdkTmqAFVAeh/sEzd1nb9Tn14B8t2SozwVCwVHbZlQsG8VAQfTr7rQG\nhpyu83rYg4dDiZ0lgU+ler04NgaiUUQKjsEqTJhPI8ZkEK8GdhgQAWLoFncm\nopnjbbTndryT4W6olGJiIiTqwcpQRqqzzSWmxzlQr3EMABQCQMrmfJYx5MYV\ncOPiTgg/O6vJhvmpMdgA1os+3+wjb5U0DYwReMy9oJnhYwvMy5eBJnSlCh76\n50pN\r\n=mTHp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClEXrHCrDU+vUCgBu6J8q5HXVYCeVSYpS55aEeU4QTdwIgA+ekhFADivbv11EDk1UqhVNXeQQ80rc6fReGiT/+LJs="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b44e752ff6da92a13718f1e96de009bcda4913ed_1609586143780_0.06337311199905082"},"_hasShrinkwrap":false},"0.0.0-00961cd102cbf689bc085a259fe88131bb3ce480":{"name":"react-image","version":"0.0.0-00961cd102cbf689bc085a259fe88131bb3ce480","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.13","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"00961cd102cbf689bc085a259fe88131bb3ce480","_id":"react-image@0.0.0-00961cd102cbf689bc085a259fe88131bb3ce480","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-zO8ocOIzPIy3RaE5Ga5OhZxQqXwMpZgCJc2X7FSAWnpfeh5xvozJRiWuwyCNlNPQ0fm01ryAU2VwL/IM6zXWXg==","shasum":"2e0cf15238e2fa035c46ae00e0fa35c75675afba","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-00961cd102cbf689bc085a259fe88131bb3ce480.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf85KtCRA9TVsSAnZWagAAWs8QAJjykMpQi+AvCtRkMkHe\nc6GHF1xk43VsoSGbBsAdfHSj7Oi2DOev12QAUtMSIBWqBsV+7WVsKH0SlvVM\nSOpPxCFGvUOnx9+Pf2Aavk7bA8qzl+DfTF8oa9VdyoFw5u/O6FXhYopke9vt\ngpIwNM6Y4Q/UBpRgo5qb3tKHvsXX4+/JdFQhOTAdDfG/V/EKFJ7bSSlb77YH\nBDzXBD7Qa2Q6XtlMeLhS/e+JXX8skfRVs6G3C6IRn1Ybr6uBtGE8YsDXDsrO\ng5HU701VRlUjJeDY2RI4lcONKz88Y2JRi+yRzQ34nD20ytXUwOl4M3ZwYXpZ\nq7M/Yz0pOvB+ghRK6HryETUXn7QWDYZsWqNGMpdNXoK8IarHU29nUDmQklyP\nY3GDtY/Rm+LhkuyDz5WsTRFlxXWVlVbmCbW0ZDycenquV/9eo0zPb7Q2+VnR\nRABbg52bfAHOZrCKOsiu3EQOC8BI3m6IVBi2VAfrjTkbmGQHllF00a3eAjxD\nhCG0HVxd/vMVELCqWSgd2Ns8h0zqauqsyXxlrAn8b2cEKFVTIyovvDADQsgq\nyRqm6KbnoLlreGrTAIPleNzDab42GK83HRh8YXHFhI/lzsRjg2KxXquksRBo\nwPH1GHteeDWIZ/6Nt7C+encNWAVzjiDITcI88vZHoROYMQhnFKzdz3i5Aa8v\n/jR/\r\n=ULsP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgYej0IJLcSZqqnculJsJiAzWbCBQjkVSJ2T6Kog62ngIhAJm8pHLLLPAerMH/2smTB7OoBnhBnW2boZVLdN5Jw97B"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-00961cd102cbf689bc085a259fe88131bb3ce480_1609798316842_0.9123811634303978"},"_hasShrinkwrap":false},"0.0.0-e164ba8434a00f689d53d7502940625a4baa2bd7":{"name":"react-image","version":"0.0.0-e164ba8434a00f689d53d7502940625a4baa2bd7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.35.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e164ba8434a00f689d53d7502940625a4baa2bd7","_id":"react-image@0.0.0-e164ba8434a00f689d53d7502940625a4baa2bd7","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-fE1n7S4wRHmSRg6xWRnyFK/g3yECqTCuqxmUUBnmfBo1c/0P3PPWdLsT/YEeWRsLgYHi+xpZsTHsmlrFO0tztQ==","shasum":"6aab43cd7dfd3f1c74a740857fe70c641f735853","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e164ba8434a00f689d53d7502940625a4baa2bd7.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hnQCRA9TVsSAnZWagAA/H8P/1UTqjOUgq2/F81nCj+B\nIBOEgweZZ/cAf1FmFrTQKIaZeXAE0ohbxKqZ+r7HtDg6jvWKRZvZxQGCS/m9\nsJ7q09FzbdY5qzFH4c3mii75AnQjBs4oxGDnTiQ5yj7gWwx4H8i5/l3g4+pm\nxMOikjMQ1xygJ3T2w+iVsHs5RXLiRSq2OecLxZHNWKxDpgRSfd60PjpAbTAm\nHHE0pqcOrPBlqgzV5n9RhSLhEy9sY2As7ihxvQsp6DzLipBJEJpEzhIbWRL+\nwRH3Ek32jNoONBSniqmPL0Isjo24kftAk9JPb2mDqBPHbVbYzoQzcKFJf5V5\nge6T+pkjP/p3gWifqpkLVNyAlASy7XhAZc1ZCSYTiwpK2Z7r93eLmTB5xv3V\ndt+P5iaxSrxwXQ/apahMXforUJsRwncka72EuxHLPY0ZEiAn34XXZ0oxyILF\nrpQoIcMv7hUw12BA22LKsjZAPQIyIJzMG3xcYrZFcWxmCaGC/3X/yaodmaIA\n7aeeXU2Emp1IYx1G2igfXQOwBGruIph78LQE8pdO245r9y+Sc3rfhltxB6EG\nwSr1kyWAOa4A/ypxOoQ9IpuI3DvXBdDMuhnbwpdyR4HE9sBqF97Fm6LXnirD\nd5mdN5dkVXBDd4LrCof9vzy7ND0c8wk8Z68/JC5fIN+SXja89P6xReSlFadY\nt2v9\r\n=Cg5r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOeQavdjpBVzclI+PfrG6SOUh9UgbodBkVZXavN0gdLAiEA6/tqZdcosnWKVqd7cenNqlyFySmSdut9qapqk92MPjQ="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e164ba8434a00f689d53d7502940625a4baa2bd7_1609963983865_0.10539144787680077"},"_hasShrinkwrap":false},"0.0.0-e1ef9f03d059c1a50d05101fb0c93c50ec71e2cd":{"name":"react-image","version":"0.0.0-e1ef9f03d059c1a50d05101fb0c93c50ec71e2cd","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.2","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e1ef9f03d059c1a50d05101fb0c93c50ec71e2cd","_id":"react-image@0.0.0-e1ef9f03d059c1a50d05101fb0c93c50ec71e2cd","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-HwKn0GiEk6WF5bL/G8hj+k9iake+HyLKG2cPzNbZZ36ysEiRgo0ATa49aSwH+U4QdEnQswLBRyLX2AAcwZt/sg==","shasum":"8a18168fbbc8ef4c61757496c30196fbcc3c7885","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e1ef9f03d059c1a50d05101fb0c93c50ec71e2cd.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf94puCRA9TVsSAnZWagAAGKUP/A13vY7c3IS5MkIP+37b\nNkPsM8RvlucrmvIPxqS8xIQXMunCMRjYgOC9byFDn6gmkxV8+9JrpCx89UMS\n9SrVJpVeErWfZK8eW8Ct/gVNR4AT17DuNPRDjYR9yQlXovo4vyKHnPrPTtOQ\nMD6ErYRiUl5/Degwe8MPcUhDRG2e6mqk1iy4/xpL6YIq/ESyhbJ+zmnmXvFL\nHNQ/o6OcQiu6P5zzAiohS5YjPJfNa4MAItMn0yU+mUl8Qi1/RSd2fM7fCgMg\nN9JYwz8hPexQMMGeH4L5b/lj+IUFMCOXK1vKITmuAoojjHQCDbqGPW32kWZB\nW3+CizWN0Bf3SPvjqj2UbvkBIlIiCDmi0c/Z19klPJPuTOacMfb1eXkeDR7p\n0bZUNYDFzDlyF0jL1WpEcjga5qqM+3kcIcj4KXdLMLIqFo6iQvD/2AW9xrmU\nNzsxWyiwAlw/5gv6ave7pnrMz4kHQNuEF/8DtlitsCJSh0gKqb52V/1hk34a\nEy6oqhWv3cvCgqZrMwV5XVuAPvs0k21KSheHgYecQfKHjDh70NHKX/e+Cka3\nJLXec02QW4tuyIDDF4fFvMi4GqGbnGT5nJxcnXGRlZ2XWRXlpDlUm0Nv0970\nqlEz4ppawzOAL4IqEPrqbGoktgYlD0fBprcSQSRL710DEN64/rSaYpq4WcI5\nu7mk\r\n=22Rg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4gwBqqud1skUAGQK0i1bZOJxaPqvKwxWuGwpH6PWOMAIhANbNbS4sn+ahG2eaH8x7ohtA3VT1vmI9sDWUkWyRMe1L"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e1ef9f03d059c1a50d05101fb0c93c50ec71e2cd_1610058350247_0.8875306387640387"},"_hasShrinkwrap":false},"0.0.0-7a5a92a43269ba69e906564622349c2a120f2394":{"name":"react-image","version":"0.0.0-7a5a92a43269ba69e906564622349c2a120f2394","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.19","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7a5a92a43269ba69e906564622349c2a120f2394","_id":"react-image@0.0.0-7a5a92a43269ba69e906564622349c2a120f2394","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-SkxOZf0gcvDCO/xA6/z89KLcG7KKpwWlk5zTGy3FtY+1IerXwbx57PS3gTUwS7fp9ZvC7vrbHRfjcrsXNeWIxw==","shasum":"febece9f48118f310423a2f9bcc3ba73e8c7cf6b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7a5a92a43269ba69e906564622349c2a120f2394.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+PSoCRA9TVsSAnZWagAAhhsP/1lxZYN3ThMnCsBldbkm\nGTS94UpV0S1RRWXRLTKrpXixVforunATvqLY/X3TZLo+B/O573pcD+l3snD4\neUixLOrCA9QhEI3qVzhvkZoKJqreTNNXUgkv2aA2fKIGV7CRUIRJgKuRMcjV\nilQMQLpJcOV9U4MIKyJjJ3FDUWVKxJRzS2VOZtuAjbNGsRSh52v9q5flieG1\nbB+PfeECp/oHPd6pgigS85z3th+j8r3jkXovKs2+AmZ2eLJTN1lq9B+BU0+a\no1CW7jMfsp0C8cI8lNYQ4dyqv4iYTQx0LEjj39dJeAkvzUbeilBIHKV7qtR3\na57v9jRgsQCYJD3fZvhpAMLbP5x9mEp2NOoCB3LheSbcf46Ek6IVQQAhE38h\n+qnll7ygiWKlvk2vGuJHbCDv5A21AoNpFopAFEheaVSAjYXVsb8aQDEI1z1u\n1FgW2tLuckq4WkqeRCG+7RbHrXBT8GGXcAxosz/5/mcmIzqZi0M5icRJPG0A\ncD3NmVK5pDswlKH5duUYi8MEYleO4eBTEvt/EcnhaQ9gooxqC4wsWfCsi8l5\naRSwhiSK+M92sV1IOIH7+ieWonMikRNCux0oXlvVccFJc8raoMPa9jsNZX1+\nY1LaMCDUYWvDX3bmRJ1oj964L1rlUXWxoSVlhpLz/pq/NZ+6sM/duTJFHzmk\nbWrh\r\n=fJgy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTDAXI/B4ELE/422FNjlWcAOr3yy/uDnGoB/FNsaLDmAiEA9tpKs1Jj2kMnlri3pO2Ya242cvvEgVxQTv1FFdsbDpk="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7a5a92a43269ba69e906564622349c2a120f2394_1610151079618_0.5842027701615751"},"_hasShrinkwrap":false},"0.0.0-242ad0c3224e80e48ca87c8a8b5427849a83188f":{"name":"react-image","version":"0.0.0-242ad0c3224e80e48ca87c8a8b5427849a83188f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.11.1","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"242ad0c3224e80e48ca87c8a8b5427849a83188f","_id":"react-image@0.0.0-242ad0c3224e80e48ca87c8a8b5427849a83188f","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-PWvltbCnPqhQy/4MiKDCApQofQjogUwQ3UCuYAPplWFLpZIuEP/+7aHnfPVtqQvjIdsvyJMeF4Jl6pOlQAMKmQ==","shasum":"c5fd8b48fd1249fbcc71d3990dc6ff4a2c99f4be","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-242ad0c3224e80e48ca87c8a8b5427849a83188f.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+QmbCRA9TVsSAnZWagAA7iIP/3Na9RKkYXnUpQXh1hak\nbvjNZK2VzdR+3wqEiWreY5WeIwwTomz9o79XRpOHzAnnL+aIG6+VPT31v4qn\nvkTWOQZhw9OVlO3sk/cHUvgYk9VIowSJmgCvbbCfg8yoL3fdFeQZGETn9IU5\nOHZf44m+EQnYjIugBe8tniUyYxR+aKZp5fS2YEwvKBfVk1ZRR48HgtpPSyWy\nvXLgg/TRG0EsyI7Qw247vumwmwzUWLXdgIBrOQCaBSttEVLmIcCX3Myh27zp\npgvN6LtwY231vra+jyC6YPfDICXwKNoEqIkRVxkTAfkIQsTkrBMXAKjPAV0p\nSDDCkRMp6GaotkyP0wUwjebX6bgAc1N0LS4ZEbnZqtJlzmN271kit/rC0aSk\nhCHQYoqXl3MGrRMmOdd6E3t3uoQdlqSCirAlVgfaO0vzxdLGyauehKIJYY5M\nzsLcSybKaQ4hZzw8aRQibhlFD1oAJ3y/nNuHQ1QVVzvDon3AvaxlP3kT6NtU\nZX/Y1oEFrGUVTMIX9x/ztMq7FypB01btzUoQzleAbnsh9NqgXTPl1EYvfC7u\nyv4GALWdnLeubW3m0mp0Anrh3FErkZvxmoDvnfTVgLwn8zJUDjVLCfpmg+0P\ngJtnBsWdyqRFIq2mQKDHAHGE0A0vdT/amHmVlFDfD0ZkOM0F6zufIFyqBjhJ\njFS2\r\n=4cNo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/OASDv7lGAkEpTy+4WOp2EcBi5J9nxG7RvncFVDrrBAIhANv5dJi4lzYuuKNr6fLEhAU5fpfqm0NRta///VfekimB"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-242ad0c3224e80e48ca87c8a8b5427849a83188f_1610156443276_0.5226428196854371"},"_hasShrinkwrap":false},"0.0.0-2357a3bee7e44bf0e8543cb047670b58f8d47b5d":{"name":"react-image","version":"0.0.0-2357a3bee7e44bf0e8543cb047670b58f8d47b5d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.12.2","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2357a3bee7e44bf0e8543cb047670b58f8d47b5d","_id":"react-image@0.0.0-2357a3bee7e44bf0e8543cb047670b58f8d47b5d","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-cc4vwiVxwHMvq/cNkv3tSI7KgRUbt2DehQXYHPiEN+xb3QSs1FChWBe7BL3C3dPKv9ZOZLmpFzDwm+E8I0p3wQ==","shasum":"3364752cd3904b06f2d4ffbf58ba852841cdd0a5","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2357a3bee7e44bf0e8543cb047670b58f8d47b5d.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+tZtCRA9TVsSAnZWagAAt1QP/11LHgMa+c7tbZisvEoE\nLgZHaz+sy2TpAmbPC4vugKo7sDIEvJ4zZumwpI5TDlb5BQAQZ338NSRaQSPM\n9CAni4URPTv8Zz9as1n1KO14eP0Fwdj4b1AfPs7vD2HV8oQ7ip0aZXmhkVXr\nbyG0ZNoKsV4qGvnWCzBps+/BT2HzAhNEl+PU8guRAgXu0Jdluoximp+sxUxa\nTrtfQtxlbX6D6dS/3l6iYrvQQntzmsQpyJ2BGdt3S3kUoyoFfLsu30Mw1Ib/\nDuqCqIk4G7OsgZ5q2Xofx6KX4wmMEdR95cCYMf0+ZKi4c9lETASqu+ItHZzf\njXkYdxeA1bgMJMZ7JRwwORdEYZzvCRpB9IpaxZx/pZhzVtoYPWBZODfXxvk8\nzLG72XP54R9xAORYLQ1cHqT5G6M0/Ta8ii4WCxa+lQZ4eh1Rp3YoFynbiEhg\nO345OFNNWmQo4hxJ1q9q8PjTX56AjzAG556+K5u5PxR6k34vMXx3YTExrhTr\naZf2d7cx0i3q43o7Fl+JreGr6XMfgYd64bd9DIFs/nafpW6m3lWEkXuAKWee\niX4Du1vaFn3KWKjllEV14SwIYw8sG2MTkpZWu1lT3Kcr/iyeGm/Xq/+MIRtk\nYO9aHUUCObt9YPlzb0cT6b63FairaRrrMQz1YkfWSzKCfc78uIEDR4bhmkkS\nPHDD\r\n=qafP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkLNqaErjGeZG2KVOnJOkPnobaSiE/BOTOvgElN1027gIgWmrob+qt8QmDDtF0+QPPSsdVrzmC1o5IH1pyuEGyt9g="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2357a3bee7e44bf0e8543cb047670b58f8d47b5d_1610274413174_0.743834929512424"},"_hasShrinkwrap":false},"0.0.0-84fb60c59821891d9528b45ece79d603fac976e3":{"name":"react-image","version":"0.0.0-84fb60c59821891d9528b45ece79d603fac976e3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.12.3","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"84fb60c59821891d9528b45ece79d603fac976e3","_id":"react-image@0.0.0-84fb60c59821891d9528b45ece79d603fac976e3","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-sDE8MNz+Pc9ONW5FvIw1ijtP7mQVcLm59drvXWwCa5zWzqs32nM/f/Y/Gvre4gu+9Bg8t/pqv234dMIrcVcJnQ==","shasum":"0828b3e6b70b878c927abe8842a2f858331680eb","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-84fb60c59821891d9528b45ece79d603fac976e3.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/La5CRA9TVsSAnZWagAA5UAQAJ7N172RmZkXMlTaOK90\ncMsN0i83kz6tAhI3qJiN7kyK2qtRP85jVNOGnXCMYzLb9nmbfRfIj01D0lG1\n+DOLXKuotH7AEi8H9E73qhVhH+jv2mgDlOwF2HAXiYJWusmC0jB+CHug2QRb\nc4wSFTR04lWuFUva7LmDjQSrvzkAvtKBMk9+XVx6BQSZHXc96QaxXSNLl0Ca\nMeQqr+FOnaEw0LJFqoQXYMa+dzeTgIgogpAFhVcxWGyuH6o19OEM+jD+/b8t\n0xvhpZPISz3d9ThGrEh07popKm2o+1yPZlxEUTyyMUtj9KgFcokM5VUhIcoQ\nNkN5hPjuwrQicnEVm7uY2ypaBSJVkWxUv7F6fCJEn8tcaIag9HXKCWDdztQA\nh+tBL1X7MqkKEUNaeb0oU9gw1IWkzacNM3ilCNJ9/lf6AH9BbfYfEv3V/+kB\nhCFalAC5W/77JTaoBr8hWM5y2Q+Wg4qa+jSzYEa1Y3843AYVBdwK0mdFjMFq\nKlS1Ev6DzqdWy53G8aLLT3trCVPZnJxgaYsT4dftcfc1Rx7Qpkv7uwW/gbHz\nSgR06juzBisfpIVDyuhm/dwd9FDWhSzvojl6atXXS/bBW5gp4/vbzwmP+8KS\nQ/lx0eC3HHdyxo2pdbXhJVMEU9paHsZcvpuSbcMVXgoPco5+lzu8bm9KmoSR\nHGHE\r\n=ohvO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAH6KUD7c1nzYnk1ev49JF3QOm3rSKzZwRj1ej3XknaeAiBdrg4fVx0WLhsD3pywcryGguzCFOKSqLE249EuT+a23g=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-84fb60c59821891d9528b45ece79d603fac976e3_1610397367947_0.5616787892424338"},"_hasShrinkwrap":false},"0.0.0-6ccadd65cdc4f0f7913def943579014d457637fb":{"name":"react-image","version":"0.0.0-6ccadd65cdc4f0f7913def943579014d457637fb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.13.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6ccadd65cdc4f0f7913def943579014d457637fb","_id":"react-image@0.0.0-6ccadd65cdc4f0f7913def943579014d457637fb","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-WUe6Xuzl9PQ5BEuzdVVlQG3NnBXzYgwtIhTAWTNlgm5+w6ZJmyX5X+duA94bMblqNg06jKsbgpM6NYtRJ+o8/w==","shasum":"8915cd82caa85c3d47e026553cfeb7757867b804","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6ccadd65cdc4f0f7913def943579014d457637fb.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/kweCRA9TVsSAnZWagAAUIEP/0HiobPycnxbjknFSVV1\nOOR76NGygRYF14OdxZtPV6xoXp1m/m1kXZxwwpq/5xwhgdt64oTD+63EEQst\nYN6XnEayCGafYQjAgTk41SbT8QR+RwO8SEhlQAquU21BUBbzByQXs9G+44Az\n4Sq9kINzpSIltACt7zkWhAO85egDoAiqHk/fCsbEuGS92UOKmYVnYbTabpGX\nOC/vSbZoRykHnP48os/xG9mM2UdfbfhtbsGP2lHkJRZJAnXIDUwE7M8BL43r\nXIrqdkoYm30dU6SeWgzrVK+z9+jQK9BKNi9NBF6tGvcZd0Ht/odB6OHmVObF\nbmVPuMWTRjJkN8xjVbkYIvMd+vjhnSvYYfgqVXW2PFsbPYDE3QMh2EIVm4D1\nIYnnoVqgYn0tihYjicDxJ9blPJYLV5IVBKIPtoIoBMiSkSHiWge+qKcuaL/l\nMMSKe/4E1x6YzepjCGTtFHHONa05qCnnsMlTddrmRHFQKITL31aCHLIf93oo\n6W4CNxua/jwwQcd1BDnEXu5HymdSYaBKow8l91Lt/dXsO7ARx+wu2B1jckR+\nKpLXjw810Cu4NmKwbAC6/7ivY+EwJ/0zvTc0k3TRu2cWt/TGwv9ADMycrJix\nsPxkn0cHPjcJpc2dmjEmqAcjtii4Syqak56hvAca6iXhyqt1dfnIeGHIz/PU\nyf2K\r\n=ztwn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn128gP52wM3rMl/Syxn7HJJDwtYPqu773JHxsifjAJAIgDMSt8v6N1HbXge1eozGDakLJslRTrkmwI8rJ6duQ5UQ="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6ccadd65cdc4f0f7913def943579014d457637fb_1610501149998_0.5413031824096521"},"_hasShrinkwrap":false},"0.0.0-1014d05cfdb848c79c9f6889ab73023131f2fb0b":{"name":"react-image","version":"0.0.0-1014d05cfdb848c79c9f6889ab73023131f2fb0b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"6.2.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.13.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1014d05cfdb848c79c9f6889ab73023131f2fb0b","_id":"react-image@0.0.0-1014d05cfdb848c79c9f6889ab73023131f2fb0b","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-MF04cYQiBKhVn2IFY3PL9TUP48ieSnjrfyX0+KZiOtXfBGX7m+UPtmQFyguOnwLsOYR4dEPqZC60dyLRL+l5xg==","shasum":"baac4a6d7bf1663e1b638e0addfe91e93b64a7c0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1014d05cfdb848c79c9f6889ab73023131f2fb0b.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAIp4CRA9TVsSAnZWagAAffYP/3EvHso7WBuOTHaJmSeR\n7LDWmFKlp6JBHvFI/8N+29K36P+wZFWoUYqia20m1wTR6gCIezIU/xOADkCV\nE4TeHoqevtOpeOPvFGbeBvBU8IjEk+wnJUZLNzcB9T1BgZjV8CmdPYiluSM4\nbe0j4mB87qDPakG15HcXj8SizHOOj7ydnSHRl/5UgdzTRWfLO1TJOYiDn2wt\n+jzW/eKxymK17qLM+myVjprh91kgE2KBlXnFnB6GlK4QSCqr06CE6lsSCyzs\nw6HRYecdOYLuH2uTf8UVUu1zTZk7Xr63Gft3wUO6y/NNYI8AGVWfKxwFt56F\nJQt2bV1Lz/Ly8z3vLtXs38yv3JcPuKIsiRkyIgiEg6BdRwB/EOI67FvWh6GR\nh7Z91xLqRNsdH7xCIloFqs6C1N55QV3TpjebslTr9b+dlKQugnRDm/AxMy0D\nxOjhTTN1QD24BPG5gRHuC1v6RWxk0Zxe+6NE5HNGKN8rlkK/zKdMZ5qIpq6Q\nM7Lkj2ztEWnfltpNJlTWoXm7j36xYXoVF/j2upUSZ9R3DiDlKeLW+WsCEayk\nTPsJCAKDrqFeQXPTBBef5KhAEbJJscf8EyFzR9pb7sEb3MFYgPr3bzPXmIqM\n2mFyhAm3P20nOatOtJ3nOrD8yG9/9z3JawrRtYqYSrvCOx5bI/Xk1wiL7X+h\nIPGs\r\n=jZd7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEzPMW23JMx/O8lE2Ozt29uE407J1nPZJRx6VL/14GhoAiEA24282Jn9OYhDODSoHn2ee0AswmZE9Aj5+OJMyFQvKds="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1014d05cfdb848c79c9f6889ab73023131f2fb0b_1610648183401_0.38137747482815954"},"_hasShrinkwrap":false},"0.0.0-65dcb437e4c4e13acb8c76c3a55196bef5c5501e":{"name":"react-image","version":"0.0.0-65dcb437e4c4e13acb8c76c3a55196bef5c5501e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.13.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"65dcb437e4c4e13acb8c76c3a55196bef5c5501e","_id":"react-image@0.0.0-65dcb437e4c4e13acb8c76c3a55196bef5c5501e","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-i5mWySoy6jJ6EFDuhjVrVnVnFtTELcHbyavs84zWowVYPDYdYyNC099ftY775vWt2hgqRP/2v3xWNDSi1R/Q7Q==","shasum":"7079545633d3c58b1ec6f8109f092280dca787cb","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-65dcb437e4c4e13acb8c76c3a55196bef5c5501e.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAuUmCRA9TVsSAnZWagAAus8P/iCpKndyK5TIRF8DX3R2\n3pn1gj2K2OiaILjbowgPYFuRS/mwu9YGZ1FH7vJMGuWwB37GI25R9/57qXAi\n9QTKU7sEWrWNVCX0yLHzPrNZEvb6gHNdOksY7x84R4iVNsKyeTA7blfEkdx5\nsZcBz1Dx+/cZWLHXTRjGqtqmBoFlz8WNrafFE27wg4hA+bN9GQO9qxI9ZsiM\nf4QW2OjPsALGvqPQaGq6UqBoYf2nLuyBQW0v1xT8BdjUGa76KD8VrvwN5C2R\noU+DANxi6MEjwIGOta+Hs3Djf5dAK/0kuC0rDS3qnmE+bu3VnTpUTdCQRTi4\nFE+RZAcFwc/PCP0SrAAmCvr6P6HCBhzaGhrqsoqjxJkYiSm8rN+HVxGzxasN\nfz05+c/wKuewTLUm5gd5iU0hhqpJOO/wdTRLu49/uN9Kfc8Vn/1Ku0JnHT01\nkNIegciDn5pLb0aK+341OBfafVpFaV298jL+DfYAXx3H199fIJW5d6KfiK9e\nYgmmJVwMQq2yiv9b5nT8/amFmsn9ne+w33EIGxfGtQSlNkqIuf+s6eV3yKho\nNbVIGqmLC/+8qyYNhCjCsUQ+KUb/L3ziWhZHiOmcwKBkfVzA1aUU6gfRlV8s\npYe13EvQUIS4SsCBcqP+SHKPYCRSLCxwBA+tGy1p+60wbXGOTmE+4blZhMfp\np7f8\r\n=LETk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJIBl8Qpul8rW8/GTa4SGCAT1zpNNLwzKiAipTnbNWwwIgdfD38V27IIFDhAniQK2kzHcfC8zW8DD7gruVdbEPIx0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-65dcb437e4c4e13acb8c76c3a55196bef5c5501e_1610802470265_0.37236779157934086"},"_hasShrinkwrap":false},"0.0.0-1be0370c146e134adcbfb415c51c67d6569322c0":{"name":"react-image","version":"0.0.0-1be0370c146e134adcbfb415c51c67d6569322c0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.13.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1be0370c146e134adcbfb415c51c67d6569322c0","_id":"react-image@0.0.0-1be0370c146e134adcbfb415c51c67d6569322c0","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-uU/ueMP8SiW9+46i/UeKpegv8EjuSvcMnTtmv1yVIBTl+ZNb5w27vmU17Hr03JF3WJB0MV7UK/CtSHAUgpC3qQ==","shasum":"638018f02f2171030cdce028337dff1160817ba4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1be0370c146e134adcbfb415c51c67d6569322c0.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBE6zCRA9TVsSAnZWagAA/oMP/AjcILjm+E0rf2+S9Gho\n03/057IU3VN2igbxdy75nSbpj2WIQ+W80hknJ759sfEJdrnbTyoAUDy/cEeA\nExlxDW1OFwaDYHY7eMXXiOHA4CbyF4t2CLFSZLRQsl13x2cHHjs9zCBonKGo\n/GYo+wc4N6FPWEKiVoztwee5TlkGlONQ3AOCtiS7KSOyYpc73kzvhpFPmuo0\nsfRu/wK9g+bn3iN5cKyDFLB2S4Ri3xMmD0cMCaYNQV6yywcMSu3XNS4d84v7\nzJhhYy41E0PbTEtoN0fXGuHcNw+MJNeJKZ9sq7Zh94Ub2K/3PmRyhJDuUwW3\nQNw+MvoOeGlEXngbm/ZCPr1kIbVPAql2tctfxUvAIh2A64DDEUCpP+dhFXo1\ndxgh59/gO6faCnJ0FL5G2wjqWOJWcJjd/U/hfYEt69Qo798cUb3YIy+rWfAE\n4VQh05h2Rd1XMQQWJn5UrJhyaQgg7bUfgLBS4RbhcSD+TOFtDyaBKGTU9zjp\nI5G+/1OaQU5UNnI+kf7rWS+x0YPiyAQriBEldJRoxrfVL1EV97GkP9e/SjlC\nPlJD0yvW4H6GHMqeqle8OcsvNzT7/3xqUKR86fgJlUFe6Buh4fZr+pbHnB42\nG2t3SO2p9eA8wcTBLVbsHW0HBUuSDCgItksuZ/7gEGTg/DWod6JXi3JDmFx8\nIpbe\r\n=QHi/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQWBjKUL9JH7hZ7jogETRfDpDy85LCzCFdSm9aOGsQZwIhAM4YFK5yTd9a3E97ksvbT0sB9lbVtGYwWsWT77kql77I"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1be0370c146e134adcbfb415c51c67d6569322c0_1610895025696_0.841214612799229"},"_hasShrinkwrap":false},"0.0.0-f2ae4219ed79b1789d245da0f68f77511518eedf":{"name":"react-image","version":"0.0.0-f2ae4219ed79b1789d245da0f68f77511518eedf","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.36.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.15.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f2ae4219ed79b1789d245da0f68f77511518eedf","_id":"react-image@0.0.0-f2ae4219ed79b1789d245da0f68f77511518eedf","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-vGaWdev0bcL1rHtun7+bLZceqTo8qkA2/IhYRzbsofeIimADJ+sQDSNvl2JYQkLiJ1nLY4Sfqmfp70Vr2+7pPg==","shasum":"ea304141fd847764b43ed5eaf5c789cd1a7df378","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f2ae4219ed79b1789d245da0f68f77511518eedf.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBFXwCRA9TVsSAnZWagAA5YIP/Rsx10kGF2dl9EK6Qrd5\n5YTF8RaCNJwJC9/jUNmh7/F9jCYroC8Ml6ZAJPCw2RXR4JNBQ2m51kYwLBPe\nEtf7ffCyT6inDu9RXcrIXzrwY0q9FBtnkB54s0VTKBhBh8+Ezn6WQoNqiQo2\nTeSWifpoIcIFHO4hcGnB78acxWEGpKB92DrRMkXI1yGR/xWOf6n9EB5PxzUs\ndApMdS+C58aIfW1YBd06D8rYIVU82RKaAECJHVWl0XTjoGMGdoVhtaK+Wb6/\noRvPGs4YTuGOVUkyyCfv9a8nHmKNPlskSMeY6J8UsOff9UYAEUI60KUscWLG\nl7ZzSjETv0uvJeNNKCBrznzHUGaVJVYItWu+4MD/hE1Ra4J01ZIiATpgItVT\nvMTDI+fgdpIaMRmjwWm7x2xFVzS5JUVG/Q45VtBPlapkWN1uKNOV4oPh1rjY\nR6NnGHavjQXD+0YyWCQ5s761aiRg7+nYcHcBRwA0fCRCbQL3gzQ0BVeJA9OY\nBx8JwEO9rH2UnTkE+5irhzfA9fRKkBRaF/OM6AorzrnIZKcJ9/JdlJapnmDl\n1yOa0TTzAwbpP5Pobe/7UUEntRxfMteCi4tcC9bP5Zs5zfaUTJxUV3E6aUST\nE4xrwLcuro6tFcgfnvVwu3ZEUUaGdVT+PgmIHhlCfPndFCAfxOtBexiZZxz9\nBtXd\r\n=D4Co\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeqG5JdVd3YXZLRvb4YdIrJUcd81Rvra+XtTxtcGm2igIgUQCZYUUGJsPkZbei//ziyL3vMbi0k+eVKDkEHUpQvjY="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f2ae4219ed79b1789d245da0f68f77511518eedf_1610896879406_0.7359550311765228"},"_hasShrinkwrap":false},"0.0.0-9b7b03e9bcb14bf96d59c3192060af7bd86d756e":{"name":"react-image","version":"0.0.0-9b7b03e9bcb14bf96d59c3192060af7bd86d756e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.5","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.37.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.15.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9b7b03e9bcb14bf96d59c3192060af7bd86d756e","_id":"react-image@0.0.0-9b7b03e9bcb14bf96d59c3192060af7bd86d756e","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-UhjEbUGBh1O66yE+dRHBEuyfrUqL+UCeIuFYHV1RGfj08KgxGVdgiyqS8PLLxxGBVqFX/SbwRWguauuillhYAg==","shasum":"47c02bcbfdedde0500b2a6f86658955aa3a46af0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9b7b03e9bcb14bf96d59c3192060af7bd86d756e.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB/4ACRA9TVsSAnZWagAAt+UQAJVVYubWVowuFY6C1C8x\n6cnYrae5NMQhe8i8dJb9HAEefVksR8ljc3IEijazDYiaVZsgFriXE/00EY97\n5hWgUxJvBFCX/AJTHXUcJD744Qx34XcWkhtSLzDMV9gltxRr0LzW5OW5A+9g\nMaJwcTWAWfPaOQNKuSia3QPVh8BT0SYpQ9oFIaxhRyij7NJOC9+LQAOgHiRW\nC5hvBf52VDYsFHTBFobc3dHDDu4+6/l1L9GBfw1aw+YtL1me6dLCbfXHE48C\nE9x1KrGBUcgoTonREqaXfFEiaBYbwPe/UidBnEPCEaTAmPIGE5OrGTzQ0vLz\nbwe0ynz2NtHHj4Ht8NTKUF87Ary7/ri9+1JSspWHh4vTo4yaPxaNOOu9I3/2\nC0fOeV79SnxnHL76GPUV2WGNfJtDmWvSouAU30A3Vecf1fRU4DMpQmVfK/cS\nB0okizlcjNCokpTXewh2/MT9EB/QOaCScSWIMm93hRq2vrmJWVdTcOAZ3FKy\n1Y3yi1JSP9pKwyvLRYV09A9D6QFAymfgqsw7evtxmPhSxaBkK130bVBksRRv\ndRs65O4Fdg0cohpce6ducmz8eKszuRfBN2vYMvRU22iCl1eD+zV7f1+8GZWa\n8iVd4A2QlU2vSnCBj2Sp7ckfLelCnJa5s30dRybF5Z3cgfKBG352pK122RyR\nYKJB\r\n=++0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDG2A74QZqFGV0JM4kctuJJxJGxKf0xKAmgqqcGw+Av3AiBqk2+NFPgxkzWBEDjkK+1RWZSXhLEWnBeToDSQe92M3g=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9b7b03e9bcb14bf96d59c3192060af7bd86d756e_1611136512168_0.5188672688962277"},"_hasShrinkwrap":false},"0.0.0-c2b572f2af3d1bc0a91d634453600c48f729c75d":{"name":"react-image","version":"0.0.0-c2b572f2af3d1bc0a91d634453600c48f729c75d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.37.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.15.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c2b572f2af3d1bc0a91d634453600c48f729c75d","_id":"react-image@0.0.0-c2b572f2af3d1bc0a91d634453600c48f729c75d","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-W+3Q5siYOpDKOc8OCWoJE2VdikxFqeDh+KRUb1uu6lQ9DkuBsziLXQGJNDXBCSqT5TqE2iYsu9TeUhSRQp5t5g==","shasum":"ab29ec084848463c8880eb9827f8c8a54e036aa2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c2b572f2af3d1bc0a91d634453600c48f729c75d.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCXCzCRA9TVsSAnZWagAAPzcP/3yMBLGZpevnCLnu80Zo\nDh1+Z4jvYszFUzt8fnUP5hGsa1Y9f6LeVW+XI8WS+TmujPqL666h4pUYuG4c\nc9LxzEeuJCoerv2f1iYTnyedQfnPyRZGGONuw0NQThjLxsvGicUUwiu9HUoh\nfDc3EsPPXvssYAil1FtWloAZTA6qM4wUfsPlUMI+L+w0zDwyvAJozoIaJM2E\nRg6PovOkt2lAqHNGgr+zznV5tKXdgHYxz8qUl4C/w5633PahncQiiI/1rQJ9\n18Z1Q/6ODQcvDEGOMOZDm9Doeh/5pII4Jc/UBbE1XOMk17FJy3zL3zIakLY5\nqwSYASWE+F0uwMVeSqAbsr1AII400yxhkZMOffkZvHXcG9XSg3Jvd3QAqJuY\nJz/CkLbcyBAGyoXXcddeOvGeZu6ueEohkEvbfZgCKTlGAxquXFH18E2K/SQJ\n3lUsnz7bKoMUTP974kFRD+Nkj2uWQJLabJChTUX/lnJzuG4fg4NKb/LH/6lq\nnT1RdT9yZnAyiVlpZ++rjULTy4pCUYdnOJQk8F89c+iLGli9x/07p9aZ+PZa\ncvw1GPA7mkvzgF2PNuW73W0GLlcXwbf4qWQbZoOysXU7chL+UySV4UHoFJ7D\nEBxM1qiWSBJG3vN0wIpzBhGsS+Tb7RKI1yU/HrRnJaH04su1E/PsMYQvUl/p\nJYNc\r\n=aPJw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkNUsI5mcvCjC7Sj26fUTDxwAxqfCEQzIArslUlvCeTgIgDQ4NW0btNQA7pTbFqjnGIdwUJ0TdZtA13uIIqAcUhxk="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c2b572f2af3d1bc0a91d634453600c48f729c75d_1611231411298_0.2578093276221525"},"_hasShrinkwrap":false},"0.0.0-05859ce9ac72ece3bda7a7451cee61d001570de0":{"name":"react-image","version":"0.0.0-05859ce9ac72ece3bda7a7451cee61d001570de0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.37.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.16.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"05859ce9ac72ece3bda7a7451cee61d001570de0","_id":"react-image@0.0.0-05859ce9ac72ece3bda7a7451cee61d001570de0","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-xH1f2ofAAJzdd6XvGVCdmA5HO1Nuntf54G4eks3zf9NB4fuqQE66MGPgn9+NvcvQ6h0ld/7E7sFBC/evjGD9hg==","shasum":"7acba7641af9f55955876923f91b572f0c450b12","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-05859ce9ac72ece3bda7a7451cee61d001570de0.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCYAICRA9TVsSAnZWagAAtZMP/2FN+kSY91ya5HrFLsEc\nQpbjpBMXeadk4zjb2PcrDHPJ8DdPYjcyAesLJO/ShOH4eWq4gVuzXbKrJnjn\nwjZd1lZN/DlEizMb7O8XiKEuoAWHwpdjIqVJoloV0272+J5ihsw6wKqe9FDG\n/gcBonN7Zh2Ave2od+cfFktgdC58rWZvRsl06gAQde0oQHAVJU8QqsL/crTf\n/p0eTNeUvq9ObM598nh9DR1QecufDAKJoPHBcInzfCOOZX8h1sGsIX+XFrwG\n1z6Zu7gO90jChXo6897H9uptssVg/+BfFq2FYrq23iZHmdDLiE9S4S7Dpeex\nU/ssCeqLGdEbrRZmKFjqu7BJRnqnoVJKhx3a6q15h8yhvdPwpVgOcKt7qus5\nAK+Q8SmFeKhEMvLREipFNT/1dACvHuMt4BkpvHr3pODX1dHAmOas1Dyfy0YL\nkYlxDudWvRKKlebhNmILtzC22S6fCWIq8/C0pjC3OOvStfBjvfl1F/RkI9sS\nZWgSxFddvW+3YneRB6uxRO4eIG7P7uIKwJ9uJlP0qxVNc66+ILDyYs7cdiJD\nUlk2rs/Mz6QHurLoQKf0L0GAp+klJtp4ThpioJM+rmoMnu8yFjAyIQHFsPAl\nUHOIE3qBI9Z5iR5M5J6FA67nyg5SaQ2W5pH3ugY6PbCFv32mRv3oI4BOmEF9\neJzH\r\n=Pm3X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHxVXTvwjqCIUnRExihU9wx/KgWPcMk4c7ue9b1GUImgCIQDwE/8OBhCk7xEJJZNBno71ZRLLBFDiwsQrMVUq0PmiJg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-05859ce9ac72ece3bda7a7451cee61d001570de0_1611235335556_0.4301707497166558"},"_hasShrinkwrap":false},"0.0.0-0b330b2d6f813c39b844063162ed834a1815813d":{"name":"react-image","version":"0.0.0-0b330b2d6f813c39b844063162ed834a1815813d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.37.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.16.0","webpack-cli":"4.3.1","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0b330b2d6f813c39b844063162ed834a1815813d","_id":"react-image@0.0.0-0b330b2d6f813c39b844063162ed834a1815813d","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-KONPNvKwuS0gpksnllfKhcCPM4q7B5toull6YGTbbhv89DWmhn7fdopjTwpI5+rbElgi55vlt0HZs8Az5pMR5A==","shasum":"31a2e21f2a5216cce3f4d5d961a7d06b1ce18f51","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0b330b2d6f813c39b844063162ed834a1815813d.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCvInCRA9TVsSAnZWagAAHwUP/304IPkJI/L2l1cAHfIz\nyQrxMxBdvBQS5X2AdmaT4k/keEEnp2icxNRD4d1msWrBjoXzszYa9mY/fq6+\nmZCw1JwxVzt3uQhL9IbX1YYstDMgrpqG2WbtEpVz19NCP2/iFlmPKvMfSRSL\nNMz7em40NoZZrfuwE7Hm0vPrArg1FqhMlR9sMdo3InLbNMKLtNqxCqOUtRmu\nn05UtKTTfZViVUJZx1TNLS4G3p8k1+XNoTVA+xTkg16+qniWdWSd0oAhMt0N\nFg5mP2LJDmIdGmU7eCdx9Kuf5y/+LOfx+Swcbh/h6NydfwGAY2mreYkYwCCK\nS5TLpF1NUs56UI55S1PTXyNcl9Qb62VualSxCROgAdxPGgR7+mb/EmCIaFqL\nh9fTLKy0kScZustnU8/ZnUKrAX+HHmEJ9rBo4Gb0M+yBHSIHWOlSOQ9+H4nk\niH+rOjnVdmXmn6Tcr5O3PzocBXV6759UtK4UEoGk17ymhIdhucuu3Bx0sZ60\nYSHgflAjsmO7io68qEWwnjsEEjF3Vapgjty1OCAzrw1iygHvKBQOVDK1T531\nQc0fReBR2l25Et7mcle3MlBQHlEJ4mkOdp2TPIf1gXZRIStwIWECxRQOM3Et\n+xMmH3rrsKghtiH4D3GKplCWRHvhZpKVZrZ5NoPhyp6XduE4rVWAd3g4FIyh\nDSc4\r\n=GOMQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp5GZUAAmGrE00CJ7GsSHsyPG8/o5Vkrh+bDNacNbgkwIgCgYC18LIXca6JGpMSG9LsQFEo10/8y4C806QA4WN4Uc="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0b330b2d6f813c39b844063162ed834a1815813d_1611330086487_0.27824849348484526"},"_hasShrinkwrap":false},"0.0.0-05a4c4d697e74564abaa1288c0214ed24685104c":{"name":"react-image","version":"0.0.0-05a4c4d697e74564abaa1288c0214ed24685104c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.37.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.16.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"05a4c4d697e74564abaa1288c0214ed24685104c","_id":"react-image@0.0.0-05a4c4d697e74564abaa1288c0214ed24685104c","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-95G1oInG94XTnvARk71M5IJ2lH+B7g20Bw/20Tzsj4oyDgY6Rc4ZvwHLJVAuN/Ij1Y8Qd8JQOy880OmeTfSVcA==","shasum":"83fb2daee52bc47ca99b45414c4f6ee22cc50d67","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-05a4c4d697e74564abaa1288c0214ed24685104c.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwErCRA9TVsSAnZWagAAHzgP/1NlwYkClr67v/n60mCG\nJOUVjlCf8lZk14TuV9lgDXI45BSjCdtmGa+f/X5QNl7HqYM3nqkIbNLVIX8E\njWRluxS/pbQn8yo5IMlYmKjC0h1YRE8U/icy7PDZdDfGSZESV7R31uRoVrt6\nN3WkrPLwC4eJ2zdAiGWscmDKF6PFOfsT2OhSGE4fJhI53tUNA6XqYjOlall6\nhwUWsY5bZBrdqAhFrTKf2mqv9/P/PZ7NbKQaWQIiRECgPkU3qJsnaWPH+Lb+\nEXIpp0MTVqI9GBhvohsSjVsGXuQaLbSSkasmc7SIxUxy0tmiFAeJYAx5g+An\nHA+S0PcqwwR9oyMTw7RkQfIPRvnXXPA9T62VbCuiiW+C0jxY73SDag3iFPi7\n/PVceTBMuX949MGWPSGIwHe6t0/7N2uR97c3hcSr5gev7AeY6TsE3yHMh7Bq\nfFxX9Eh1QwYmikdWj3ak3TtNRiNYDXacHJ84MywaviAsGEzp54JB4SVShHQ/\nq/H9C1eT8N4auRoQmV6qfCvSk0bfn/SfQRDyR6EvEpbdqkXMx0b7mU4EPr/V\nYpFhpoidet9rWQ5mkKnh5XMN7bN24QcDn56G7lrbEcGD+LS/bbkof8NWV4ao\nCds6cTTz2SgARW7fr+Hxtk0OL+LluGv+a33oN2KTKnyZ9uHpmHoR7OPEGnYQ\np/JK\r\n=fkEe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6qXBMxqjGYiZjnTR1oXjIdgIxBKzEfDOExxCtvXcJ6AIgSzGDDcZSYUx98u61Qsx8t898Qfb4Ahud2LWpkf5r5h0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-05a4c4d697e74564abaa1288c0214ed24685104c_1611333930869_0.4589499635314207"},"_hasShrinkwrap":false},"0.0.0-71b1b051dc5ccfb1221f52104ad35d93d1590692":{"name":"react-image","version":"0.0.0-71b1b051dc5ccfb1221f52104ad35d93d1590692","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.38.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.16.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"71b1b051dc5ccfb1221f52104ad35d93d1590692","_id":"react-image@0.0.0-71b1b051dc5ccfb1221f52104ad35d93d1590692","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-0L1m91o4B64tUF4JAfOni9Vxck4sUzHoJZeefRBcJqWCmQ+gwaLbmvuiNs4e01+k/yK4k+vEFgqmCop+QUN5rg==","shasum":"da42316ac5d4545b99fe87b0bcea3eaa0be9fc15","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-71b1b051dc5ccfb1221f52104ad35d93d1590692.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDG/sCRA9TVsSAnZWagAA51IP/2H8EM7HUrE2NB1s/KqP\noIQ2zoYn1RQZn25jfiayenj2AOj4gEhDWzQ6scqzAziaknQmVBjhb81HKAkr\nblVpNNl3VwN13sGmgaMhPSSAKLFSBjmnlsUYrj8Osr1uYoBVt9Sfg9BjqX4A\nzGMOBs7cF13J5NXaLi6d5sVf57ApbSfp6Gm9K1iar+8PdjWyTyS+YKW63ZWb\n1g4WfkTMPjVv9fvhy/t2PSYnjkp9W9qOfk6g9PV9lyDbXRs+QC2i0PWG9e1u\nbkhKshlfgHLzWsX7hf7OEQDX4Aywsx+3Udpu5BpRZhFGnzFGilA+blYSmMbf\n77efcESNGMEahmZQZllPAeUurge7J0+50iwtWBLUx/r5JpyIub5Ry4jgZ9Ro\ntGt17QX+AzLcfoG54exPmIPrGmFT9A3Fip0/hYbhgZy0/YAQEjg+3vi4BHeb\nVerdaMvISmC1xfWVP73afjtsvjgW3H0K5MczTNYF356SfHVngJbP3pd9IdmZ\nXAsrlf3ffCLDDtd8yfZ8WSJrEXDYl05VRzp7lQ0x4O7Pj5LgN5nxpHoxysR0\nAqE6s5AEFdGfm67wh2BHU3gYtwW36PAhw522nGP7JOgmz84DPRsNtJL1uHcN\ncIGRUNmP7r6MK1s0ohjXTegEwUGiyLECNpT+0gTAr5FSstgohESESVantKsz\nb2Se\r\n=dS9Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/myvbJ9AG0QHdfGXv/exbJCkMveSgi1iz0w4qnsh5uAIgfinwwpdb+lGoLwhFu4OiPjeb6qEZSd5ZQnbpkIA9vFw="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-71b1b051dc5ccfb1221f52104ad35d93d1590692_1611427820330_0.6259221022592671"},"_hasShrinkwrap":false},"0.0.0-13e3f60fd54dd43e269b321d79789f92e2e5ccf6":{"name":"react-image","version":"0.0.0-13e3f60fd54dd43e269b321d79789f92e2e5ccf6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.38.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.17.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"13e3f60fd54dd43e269b321d79789f92e2e5ccf6","_id":"react-image@0.0.0-13e3f60fd54dd43e269b321d79789f92e2e5ccf6","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-rVQpLUyFxkMpDEfPG7bc24Gk8m307CS/J/PYR4lZ7zoKz/DRsfoXuJptMJyo9AXDCqf8DGNknuCLRtbieyj5XQ==","shasum":"5bff220b0b0a3edbaa662870fd29b8c6da61dcab","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-13e3f60fd54dd43e269b321d79789f92e2e5ccf6.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDH4ECRA9TVsSAnZWagAAQYMP/3wuDr1mHRXbGUzycE+S\nhbq1dC91EcIVxiSjn1ypBp7pU+sUj4/8a6o3v+/jUrjeDRyivPPEESaQwu29\ngyCme3fKqGOBhGbYWeTDNCfVlRB8Cwr+ots5K6i85FkcYQ7LjwJyo+H2ea1o\nR/lawXcmhVeOYi6ccKcxByuC24DcZ7E6E5YAly9LzQPOd73jTd9aRIIisbjK\nYVgUpPeKG4Mitezc1tvyUpPV1TSpcmYI5MfzpqkxXOTIHmbAA5Xo28sDNuMT\nRY9OCMv52dGh6MAisZFIvqwLGTilWSQU48Em51FXyXFix1SzqnC/FWxCLeZx\nAJSg6Pn/BamSBzm9bH9NcSOnVRXQU1XWNERgRMuSes/fY537W4SO3p+fl9xt\nbHviXBKvRe0Py9VaEp52VmPQB842IRaqQzrJ7N1PqxKV3dS5d0JbDhvM+CrX\nX19Q9jX/aY+O6soEpgb1PuafiZWcAYFfqrZlnStmeV4cXxkLN6ZwDk4xIMFN\nkeLYABax+HBFJJEnf0WsbvZ7ezgHs9GU4+a1cvHGQw8rXjVcZRPSAS9hyqq5\nAhfwFmx6XgCGehLPJqQaMLlTgfwtDGJ5NsebdyAS12JQhI6Moyv6l/HHj9iq\n01fQI7un+5AAFQcbHn3CHJIV8yk0OoPr1FYmFnKOhIlBnNEldh2l1owXbU9h\ngAhd\r\n=7HlE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp5XcWOA1qGXviNfJuE3TDuUBXYnH6kQBuM1fyNF56fwIgGvqJ5pC8hlCe7vKeVl3VuhXRJxVIlKO5F0rZsTA8rNQ="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-13e3f60fd54dd43e269b321d79789f92e2e5ccf6_1611431428327_0.10920036980046843"},"_hasShrinkwrap":false},"0.0.0-6a231703ac52570a110f24087e804e56de10f80d":{"name":"react-image","version":"0.0.0-6a231703ac52570a110f24087e804e56de10f80d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.38.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.18.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6a231703ac52570a110f24087e804e56de10f80d","_id":"react-image@0.0.0-6a231703ac52570a110f24087e804e56de10f80d","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Bh9ebmgoxOcW6i1uHZjG44EMqu1mBWQ3Dbt7u0xm1sTfgIunbSK5jXtRz61MQieLYowzX8OS0hHrBSycCsSfpA==","shasum":"aa9e4189d8c4d92a898ff7f5f60cbee26021ff4c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6a231703ac52570a110f24087e804e56de10f80d.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEerDCRA9TVsSAnZWagAAN80P/0kcaff6wwGu8X9LRiAB\nCxHaxvsYCJoiQAm20cTRxq7rVwQBcY27Vz+cAvMcFaWlv0hQ6i42dziGXVhU\nYJZjc+lZmEjs5OBZeAWwz6dum6R7IHDCoUbmNt67ql6QaYxC66ynY4/PwZC/\nqLPQEGn+jDRvNulC7LdKaWhDdi+IISkxfFlTuwWj2nXIGAB7K1/XGJ1r1FXS\n0Yv9SJv8J2YHe0md29ZnQMgKasq86Zs2KWlJKuNHJ94LiNR1/2UX6qrPBmh6\nj2SYdYy5wyDKmGosviXGPd0OUiGvz6hoEeHkJcCRPIcl5Zys4oYlEbC3HFqf\nLTiJOTTvSC329aAHmazvNSbHvabH7N2bLI5RLfobHXqxfVT3ZpisNJs3RI1r\n6HnJz7bPLMVOCxg6qMly1aotC4xuXHJFEpEWTEjDofM4vhTRHSyc5DoEjt3e\n2aWCzHFFk9NdZ/Xi3yt6kKYFgePI9KdXhkizOBfCvydebTwoIYwq3hceKWp1\nkV3nd5ymmOc8sf56gv9bzvfmzYYUxbMTchLyBv4MVfKZLzIfmtdO6waS+1Zf\nYGrVdNtevUPz51oU0PGsgGKF0TBPr7XVQ2rNkDz/IsShIjoKGO2Rk03Ps88G\n/XvfGsvoHAXfdkycbEOmaAowcqHL/QHXafP7PNBZtRjIvz34bqIjafzJvH7f\nKLyF\r\n=yC5Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPNdFNT2OutuSQo6PSyUCPAD43fr6VpOpu3fmOyGe4tAiAChnnmzps4YcGzXQTugoLidXPTYb3wlItX3UKICIJtQA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6a231703ac52570a110f24087e804e56de10f80d_1611786947261_0.2765682998140422"},"_hasShrinkwrap":false},"0.0.0-88fae242545e5ef68d5dd2258dace8bd797bc5b4":{"name":"react-image","version":"0.0.0-88fae242545e5ef68d5dd2258dace8bd797bc5b4","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.38.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.4.4","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.18.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"88fae242545e5ef68d5dd2258dace8bd797bc5b4","_id":"react-image@0.0.0-88fae242545e5ef68d5dd2258dace8bd797bc5b4","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-YOkpCnM8nqdppBhp6kz3qfhurxLJLh2reTZMqcBy43H1lnAf4yl8cTgl8rTg/luxcqTckbeIjqDNicqiV3eKWg==","shasum":"91a253b63b03e30b82e9015a55bd1b4781b68833","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-88fae242545e5ef68d5dd2258dace8bd797bc5b4.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFEmZCRA9TVsSAnZWagAAhugP/1arBBM7frzeisQHpko9\nWtEAolyN5MzpgTsMIvefM4wOMu13LmkUIa0yin7A6tQR8LhJaxYLBIxM4YUK\nI8aDDA+vCxZFKoy9iX9B5fwecshYw5O67O5mtKQcxGGhemm6zzbL5pY4xO/J\ngJfka9xrimWRzMYzkG/erDxDkjnmqbSs7NnyzQXMrYD7QNazt8qRcI7Pf+US\nvotSIcEtON4TEfPFjFaGJ1u3j8VyhVwbnQ2xwafYk3IXnHOuGBNdX1Vw+ocr\nwoqJCTqPx+Bqf9D8p+f3ZGDYbOUX5QoypHIJnj97t0bx2VDPU6rloCT9oFSc\nxE+WXPdX1Xn81SzSMDwvSF6Cmskg6Y76Q1oOXy555l50NWZ0Q9HAaIh/57Y6\nGqBYTnYsbRIC1l20zqqtlPTG3R6Byr/OQbXLQUrRji688yBD6scxfEuSVvyW\nL/ShfPsgrpQoG9mGtRWGvTOrn71Th/Llb3NN5/VDy2Z34j5dOMnpgHuk/VJ0\neF1B1/4bBZuQopZpdIqcP6gJ/+CPBWPtxn0499xrTTNiFryduNIQO3DPah1w\nGLL0qEtcBmjVSGlX5LVL4UDQPJQxDyyDqDiG17eajk9BAQ73094wBjtB9a4r\n3LQcK96pPoJqbokNy7SDbSm0jFtt/xAfQuNabGtdi/tPcj++hpvCZ7J1l3Zz\nPRq8\r\n=+jAd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJ0CymGtldp+CJ2PrOEMsKGQWkI58dvy7OiaT6ttwXQAiEAlVthzfYZAtb+EhFje8HPjebH6xg+xzfM6eK/UQKP4B0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-88fae242545e5ef68d5dd2258dace8bd797bc5b4_1611942296752_0.784306322331439"},"_hasShrinkwrap":false},"0.0.0-0c4fe3d13ca7663b7f909a2c81bef50cf9b7b4f2":{"name":"react-image","version":"0.0.0-0c4fe3d13ca7663b7f909a2c81bef50cf9b7b4f2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.2","react-dom":"17.0.1","rollup":"2.38.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.18.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0c4fe3d13ca7663b7f909a2c81bef50cf9b7b4f2","_id":"react-image@0.0.0-0c4fe3d13ca7663b7f909a2c81bef50cf9b7b4f2","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-3H6CoX9k48pGGSS0A/py2ul/cM7yUC/CR7A5CEFwrF+leIqsIA1tEdozMKO6k/LK7e7WEd34tUvrp3In69JREA==","shasum":"8c63a441392b1de1ff7531c2d5417b36f882b37d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0c4fe3d13ca7663b7f909a2c81bef50cf9b7b4f2.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFbkICRA9TVsSAnZWagAAejUP/jSxBkaQL2EubeTg0bC/\nYkDRR6txZZiZFL3T6HCLmzxC9Wl2R7AbgkKgvNgZ22vtHiMvGx3KGZ13dLu3\n2ablokY/+iO49UDAoTVhafuTHGaFYg2hS3SUnGWCFZCTJXyMU85YZWhH+eq2\n1ZIeCjp/poDZPmjcIU4Jhp5e6lMnKaqDIleODfaHfpWnt+cCFi/AFvVV0oNX\nhnPBppvAZ/r4vj3aqnO7FfMWOeGxtWBdtuloE/7EeAmLsoohVJ5tCXtx7aBE\ni/ZzWUwRErKF19hZj9wSxvlRE3irW0fHyP7dlni3pT556j7N9LMfRPs60pqC\nKP8usZDBH2i4zMVhla1I7luSqDij7WMTsAMsVhhChW+FClM2BAjAkYMQQggW\nqsSb4lgCAM+vUlDsJfmp5xGEANMW6UNDWs3IoxSMiDRW7ifwWIbFr3sjrEYw\njlV+VaHxQDyT3TYdFkeSh7KWhI2FB9Q1yJpNvOzz/HouMNK9Y6oVGKoQslts\nKohWn+NiaDNJstEQQWkNaN1OGYG97pEKkRPEH0tbMS5E9ffIqwmx28bMTmNA\nM+BNVAnqeXNcDtCxyIPnODcuHjJAwluTBr5P8dHJZJZVnO5RnGCO7GyTAjgJ\nAPjKTsoXiMUiafv4r0wOOmkNhFpZWX3hvYdr7MvHn7qmX+Rb1wJLko2G8YL9\nOQG5\r\n=r3nr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAibobpNSB3hJHFDzIuQvyjSJQRUli5hIxFg6s8se285AiBV0DaqJI4WNrmeI3m/WvRl8tj8Xrgj5bRQDSEZRidu+Q=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0c4fe3d13ca7663b7f909a2c81bef50cf9b7b4f2_1612036359695_0.762247650072265"},"_hasShrinkwrap":false},"0.0.0-e8a922e9bf89af72296b9934151fd0d8c48f2aef":{"name":"react-image","version":"0.0.0-e8a922e9bf89af72296b9934151fd0d8c48f2aef","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.18.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e8a922e9bf89af72296b9934151fd0d8c48f2aef","_id":"react-image@0.0.0-e8a922e9bf89af72296b9934151fd0d8c48f2aef","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-wR/UhnXYsVg/Cv4/NENbhp9DNwk/9Knl+L0ZGccofBiyZc5AC3Oe16ZOP9nL8Uz+KtObtGAk7zi/t+HjjoN2tg==","shasum":"8147a31b5f2bd9bcc406589223279b8be539e441","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e8a922e9bf89af72296b9934151fd0d8c48f2aef.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFzOECRA9TVsSAnZWagAA8pEP/3JS55ul4wo0xGka2X7H\ndZS9aS+UFwvogWTOTFW2EQ/sclKd99pjysbqfVZQzMva+6dEol0nr0HCCc/b\nF8tjAYMKHXUmjNn4FzuwurAOjU3p99Em3n8NjzgY8VSfgCznsrBy2JcV67VW\nAgHgDvOrbuv5wcu7mgBUcWqwXJdfaAy0ZT8cFGoOgpphAB3Iw/xcsjPwjBCA\nYX42bQPYL2Ko+X73NrTadfBotON2YwxVg0s7pI3K+M13JD1+SuNcMjIuHRmP\nY2hz6jiuCmkLTOR5W67Ovktlb3afAALJiQUTQafPzvc5UsN03Yik1zuq1fXx\nCY3Kcj58c5RJfPiJaYBX7iHW/YKePCHQtmP6ElSwMfezsSsvHcJ4yvkrDz/Y\n+MuUJ5hMAQBTCcRNF4UNw5JW/VRoN9FlRrSb0nG3BgbVeYauGW6W5uxEwH5P\ny/SQnLKmaxrb3r9NVbXwhw8d+VYmmZn5VKaPaIpYZ5Dd4PBVV1JuvpGErtkB\nUdY4LQR6YmhOIu7SG0aGjJeCNKAm4A8NzCiNeAXXKCt/NMZZs7/Ltge5cVfC\nDf2WlMSsmcFFLmDC/A8KhOgGNyGrEoTtkjiXBybCaFIki2ktSMhvv0fsifMT\nqnfDd7u8SIWvGlFopZo3XpCD34yn356ihcfjqRNrSz5dmEVEmu5EoBydt94d\nPv6Q\r\n=UcOt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0mYVl1eihYLu3UDlB8bUSc8KEOyiPYu9EC50ZIK6QdAiEA4ai3E9rOqi3xacIpiZnh/XeZI11/UqnnhN1h9sJOuk4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e8a922e9bf89af72296b9934151fd0d8c48f2aef_1612133252147_0.6748543487191307"},"_hasShrinkwrap":false},"0.0.0-b67e0847ebad38cdaeb3ed2f640a0d943b1d44c6":{"name":"react-image","version":"0.0.0-b67e0847ebad38cdaeb3ed2f640a0d943b1d44c6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b67e0847ebad38cdaeb3ed2f640a0d943b1d44c6","_id":"react-image@0.0.0-b67e0847ebad38cdaeb3ed2f640a0d943b1d44c6","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-TkGA/i5700YkY7FDJfzhogF7cH4onvVqu70ST4HLn5OZJZomhlj1hm/hxxHkH2fnibrwno1r4df5F/am/riieQ==","shasum":"f95b31594ad02e4aca4a42aca615ac93e3a71a4a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b67e0847ebad38cdaeb3ed2f640a0d943b1d44c6.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgF0LOCRA9TVsSAnZWagAAEYMP/iEfN30O8+U83VFYei33\nFxffaFU55YZT8VZJ8B0cJAsgbniMdReb3bLVGph41wdg16q6o5KqtrJEZMrW\nfDqDObwRcByu3I4q3TRsgi5/YyRDvmJx01XWav5O9wgutrTMEpwVtfhPvBYN\nMr0QqGZ4AvAZXXEKmbP+uR38IHPXPj9Z1jiPO1CXryZpJRY6zVNNvDbL6VgP\nofF24GQhtysJUG1yoPEeSIRqEl6oha4VhRZrwcrAEs3sbzus1im7rMI8j+1i\n7SwJdmYD/tCs08wDDnqWeMS8l48JerX3bvoY4X7xIC8NHlvRl8tdJksjTP3K\nXSP5pgrfM4To4onpfd3Tr//7jMvxTx72IN/LWzHc6fc7bq5ah45GNY+QUeyL\nPgSoF4cho7zRh6uiXmcF1E/M+RwasiuOP8S2+cI9xUgFr1L7346rhQRTLGc2\nk/wtGmdfA4o39iIS5FHxdL/tFEEcZqg61aq+kgjge+i4y0uNkGsZB44W5zBo\niRNytHCydATtD2JnumoJpYY0/KvFN++RjMaRdSMobocsGtCeRRodyIg+KmO5\n7L5szGV8OBq0Add9fczvOl0KwJiMWRHN97cJl683Qg7M9Foh67mCXLEITBZa\nY0yR4IJflRu6OamSPIMm/oRfcpuBxcGUscVNJ7geY6UemA16xhHvCflRlPyi\nMcro\r\n=UIpv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9wkVkAdyHMWZ85NxK0UQWjBdX5do29RxVhfg/s+6UHAiB6CHu9rmp6mplB/CqsYGLWgbY5c+H1zLmfwHbdBpprfw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b67e0847ebad38cdaeb3ed2f640a0d943b1d44c6_1612137166293_0.29266853299800677"},"_hasShrinkwrap":false},"0.0.0-7f92402ea6b208e8b734aff0575781f9fe9bfa36":{"name":"react-image","version":"0.0.0-7f92402ea6b208e8b734aff0575781f9fe9bfa36","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.10","@babel/core":"7.12.10","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-object-rest-spread":"7.12.1","@babel/plugin-transform-runtime":"7.12.10","@babel/preset-env":"7.12.11","@babel/preset-react":"7.12.10","@babel/preset-typescript":"7.12.7","@babel/runtime":"7.12.5","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7f92402ea6b208e8b734aff0575781f9fe9bfa36","_id":"react-image@0.0.0-7f92402ea6b208e8b734aff0575781f9fe9bfa36","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-I1fePgM9JCzAfsFvfyv7QRPpxFLEQyNTxin0GaL61t80+1iPMmxLGl4cuLiyDab33divvoNjCArFSMjpbr7m1w==","shasum":"9361e26bf0b821f092087a2bb1aca438a9e3967c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7f92402ea6b208e8b734aff0575781f9fe9bfa36.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGmM1CRA9TVsSAnZWagAA8E4P/2FywwbkObJZn4nXi80Q\nlBhCZMDqqxo32enNcAyLTMG/mv9NdBS0+9bVgCOkPqhnw2BoyvcFFvNX/9Nw\nfVhdfjZheuqxmZ+gc+TgxZaZ02xjs+UhNb2hf7svYutw0sH/s58Jyq5ubyVC\nfRuEAmTphLX1hLh6i5Sp6+JnSUGI1qcGoXI7P3I2brv8uRDpNJbudjG1CQPy\ndUKt7FVPtaSWei7V0r9ARG6o5CYdvXJ9r7E+s8tANSHHgLVTgPSwFSm7lQDv\nZJSyv0pVVO2cD+mARGY9VUZJSRRnHb7V8CCYJJtrVBQvbMGfDkxJiUHmhiWv\noFWGdokH/X2tWbPPMuJqxSmnoZR2BDROnc6d2xwaSuHEPQ+JT4jNk39TXqO1\n5R3H+GK/MLYwxVcFPpPpfZ1U0H3SS1Q+sE7oeOvzuWZauIKkdBtR8zHXQZhr\nrLhohjB1QqQ983BBrSiDMf8UWglbBY+5d4seVvYVlvGgdAipCTNHTxLCo89G\nmXkSWlKrzvgnFKCIuMhvwIQis4K0tvJ9w11kIQFTy9+qJbZzmLUVMhzYJLb6\nCq6Mou2toZj1yVTn/m1lkolT3YoCo5IfFlHottBo1G0+DOOWatl00Ro00AmT\nevJu1j7V3XrT4fET7tv+ErPttfm4V/rZqkbrGLIybdS9R6lWMtAKQx/p4Jub\ns+YL\r\n=8E4p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFkmj/6ghZcxjiWiaIXUgXZqbRtQ6cHOKNlPqtsxjWrAIhAKnzm27gHwCucyF/rFeRg4cRaIls26yCeL4HHJw4E2G4"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7f92402ea6b208e8b734aff0575781f9fe9bfa36_1612342069291_0.07860360294890567"},"_hasShrinkwrap":false},"0.0.0-51033c1a392889089f7fabf8fd693331b62b49e7":{"name":"react-image","version":"0.0.0-51033c1a392889089f7fabf8fd693331b62b49e7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.13","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.3","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"51033c1a392889089f7fabf8fd693331b62b49e7","_id":"react-image@0.0.0-51033c1a392889089f7fabf8fd693331b62b49e7","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-OQh+f11fVU0c4j/U1QLcWVVA5Y6SqoPo3LnJ18pmO5b/tUDII+HFT2kFXcWTvGk+s5yYTCw2ErvBkgN+1Bfv9g==","shasum":"9101303f4f19de91afe0190e590728b317d64156","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-51033c1a392889089f7fabf8fd693331b62b49e7.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG9jvCRA9TVsSAnZWagAAUDgP/RpfgYUnp9W9H9YtMKi8\nUMmZmeWxKd96QXPgDdpyDFJKmguMgAR7frhF9Dr1YgDm6bU8M9DIEgUQBi7n\nBxymohMO30I/dcHzhVrecakB4RixzhLqwbusLHPk6tOQe5Ul7eZ/BiO9/D0k\nURiJR40XsUqbeGhTTc9dpxeETZaiLdzYEF3y/awGs0w8z337ofESZ+U0oPqB\nYG+3L6ZdcQqq9cTf4KMEhrn0R2iw4aIt+Jn/GHr+vSsiosxJ5wq9a5QX3kX6\nUoGt9jOgKJEhwQEgZcUs21Z1QJTIYmhilJ7PnjyhkGvUytC1+WYFppLSC6PY\n8i2q76hNhaXVBGUKoZkjQNYbXREMs6q36tQ//5Qa+tbRdb+zNKf+nBRh5/gd\nqv6aol1LEV7bIk2uXWDeSdmsNAtDHDep8v0TP8SvHwXfz7PJ0VquOBfauQO2\n31txZP/pjDqNjP21pKGy3baVvBQQ/NmPc1IRhTiY/E5TR80OjOVAQi6dRY8o\n/fiCIGA8LkvKsawfm07NztbzebSX6ALQrt5qJ/dwDGvbD4pVgS5t4Es1WLgo\nXwC67Qne2fyRaqkxCr5K1zV96NkMjomDQp7nnyqT8eTue+pi8aF67GrLGjO7\nk+2yWsccQvvvaXZXWCZUgdEfdYf7tq7RzkJFi9e/VYMSCQq+B1ditXMWemp4\nDc78\r\n=xAi7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUajZkH4KRZEYlZ8zddBPlzDshLE1+00y6BWj7RFbbDAiB+zKhe49ZA9ilK90H64jq+PP5XJgGV+X2UPuhbVHcyqQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-51033c1a392889089f7fabf8fd693331b62b49e7_1612437742445_0.6174558495132576"},"_hasShrinkwrap":false},"0.0.0-fbad1ed8e83e0311d87cb9ec491e3c8fb1d892a7":{"name":"react-image","version":"0.0.0-fbad1ed8e83e0311d87cb9ec491e3c8fb1d892a7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.13","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.0","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fbad1ed8e83e0311d87cb9ec491e3c8fb1d892a7","_id":"react-image@0.0.0-fbad1ed8e83e0311d87cb9ec491e3c8fb1d892a7","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-BxIFCoXU3cXA1Tjr6+93I/tZbkI9hvHBRDWZ8yr8YWm5LmuGAbh+4nmX1WHNGvdt3Mn4bRCgNexLo2ZDSTRCpA==","shasum":"21994546ca49d66b4e0a46ea39aeffa62333bce5","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fbad1ed8e83e0311d87cb9ec491e3c8fb1d892a7.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG+gQCRA9TVsSAnZWagAAPTEP/14M8kITln3QaEt3Il58\nOoKuRoEiaf+2qtUfBVuX+Gx9wcfT6cqCRVHzfCUPAY6TNDLW4nV6pgIEl64h\nqPWzTDfxhlg/CWQyCgMuhTdeuN8eaRYywFGPAakv+APQBI6JmnEAAKWC5Fdp\nSMm8ARaNs42553AKaVQrzsX2w6fi8+OadFz3uZlZOQYhZvStSAk6dbfyhY4T\nGP8HUENVvfT9qVZzKLv2WBNRxQVF3Z0JkoGiWSBM3ljOiOqYCOz8C4iqTpIU\nNZPv+CCE9ukcjekiUY4OWhMxIeCa/mMuVCYTqkGo8nURQri6SvZAzTc5mIxH\njM28/fLVDPdAbiq8uMd+fXkXCT1lOzrbtycNtN0N0nXdt52CNTyV+4EuvTPh\nEoUFD5karwil8/mR9wEAEXkApmmDWTeTu38uCSJEefCO+OLOwfrGILb4hIiG\n+aiWCXJxOKbBX4ngRUgvEaME9/RuQ9YnSlwcO+sfelK5BC9Mgk8Kp7hyQ1Ga\nw23Z/HuCeS1x8MdE47knv657zrx8pkelFqmC1Y1XyYCsnkOh+RW7s6FkU/vs\nrsmd4/xua/AXSpoMgRccl07YNptnp1bK2ysYiwgIogrOh/RnfUdfP3+YTFg9\n3jnfPsqHqR0B3wkVMZgotWuSWbb4V+dB4iCJItFYRkI6q15P/AxXa0Xg0Xrp\nE34o\r\n=5whX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAaL3NQvR2b9ecMA+uKmZW5uQJoazKMPyeNykeRepdL4AiEA6ib3hi8F54H3VgwPT0JM4vObqgQO+Jfvqj7sadmvZqs="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fbad1ed8e83e0311d87cb9ec491e3c8fb1d892a7_1612441615898_0.029248699447371518"},"_hasShrinkwrap":false},"0.0.0-b13751dd607eac0ea5d1ed821a07eff5ce956432":{"name":"react-image","version":"0.0.0-b13751dd607eac0ea5d1ed821a07eff5ce956432","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.13","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.4.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b13751dd607eac0ea5d1ed821a07eff5ce956432","_id":"react-image@0.0.0-b13751dd607eac0ea5d1ed821a07eff5ce956432","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-Aj3Ic3jqs/Q9rGeIxGal2CvbN+dLobyaZ+NL3/EDXuBQzdaDQhYVDnOYbvC3wM0p7OFmIlL4DFS//khSVy9pyw==","shasum":"702c249fffc1782aadb75eb8dcff4efc6dcbd426","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b13751dd607eac0ea5d1ed821a07eff5ce956432.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHVAVCRA9TVsSAnZWagAAocMQAI9KTHkaImgPP6UI2lVv\nLurNCRW8MkLncexxkCT0Q2Rak7sutNVDGRYX2wIVU+yQBgEDu2ADOO0z05kO\noFMrMSHGzRFV8ZswgrzhL39qwdnu5HjwaHrnk+q051QyIlBODwk5kwuNMGaU\nATa6Q/EtYuwpBe06LUIaIYrdmE3zOoNOO6qNOTmpd6N9i0xncNHo7BX+PQ4P\ngXBT+sFSgZl0LekP6pcyQnLUKBYwKtVZS3rz28zDC8d6EP/kbQAmlR0037ti\n2dtV6eFmKytVrK8de58VPYd//ACB2cqdcje05+8fNcuLROZS4B0l22D3ISot\nd4wz0B9dH6JfZT8GdSppGGwVjuSss4uhpMn/F3DhMv7WW8fv8k7akfP9wJ1D\nesHuhep40AsZWk3BwLNycgFxB9lg+USXKGTQFe+Ym067xrSb+zkIWX6Byw/u\n1B2HYqrjkeTxxabdR/juI+XQJr/whKblz4ZDHNCrXIb1pn1WTfd01JI5zRIJ\nVPr1TUAhEKXT1DXC8CnEsteS/ABbHEpnttTPt29EstGuPQQ+nmQIvxXnUPSX\nD6Mq9qoaISo+8IZFn/pAQsHHIHF4LZ4Je34Y+++IRs+7BRwbWPhOzDI8rnXw\nI6gxhNB+VlloI9ox1xbQxjmI/m9eCRWcz4fwSg3sOyE9K4taj8yll2/4iC67\nnIzt\r\n=Isa1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8UTizmlycUey9DtB29dIWcRd8sT5ryZrGhE9Vf/anPAIhAJcrE519cqesdJuEwoHpBayAXpcoe2r2P4h703um8ANW"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b13751dd607eac0ea5d1ed821a07eff5ce956432_1612533781357_0.3326847004259641"},"_hasShrinkwrap":false},"0.0.0-a6576d69e2bd88a30093658e1651ba27bafe5740":{"name":"react-image","version":"0.0.0-a6576d69e2bd88a30093658e1651ba27bafe5740","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.13","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a6576d69e2bd88a30093658e1651ba27bafe5740","_id":"react-image@0.0.0-a6576d69e2bd88a30093658e1651ba27bafe5740","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-G2XhdyogMeGVTWWsjDTFdjXn1W2qeX+PK315lcK7IrnIC+VrrjzAhtHMzyeT4GBbUYxNxsXqGaKfyaBJoGwUTg==","shasum":"03fed1bf36af1db21b881a504d3e98b13a08c800","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a6576d69e2bd88a30093658e1651ba27bafe5740.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHWq3CRA9TVsSAnZWagAAiBkP/j4QY9VUV1+sRgrXgORS\n/kFrdVN4ZQcwfGwYBE9eXkP1IJcfJMMkxChysKpU8Lejxior9oXi5jUoVnGg\nSo8QXoW0BmMO6qMJ3zDLJIMmMbsiFzhNKRByWVQpjvjlfcb+jr6LnulDIfzp\nOnu/RifA00ryFDOZFIeoobdsigaiKZG9H7pFIAwqWmAHSRebgQGhVsPY2KBi\nc8wdeT+uD8w587qB8Z1vgLz/bYeJnmdfDnRrRdDI9JdU5NpJQlCgBdr46XXR\nHM8dKRe1IaCxe2NMTlYL9sHEBi1Vmo+OOOcpGPxH6yQOQLtdrD6TSZqL5ZKb\nZcxvW9+17q+w88gBQtewW7DCu/oWFyZCLRFEYyMG03qgJD/0x1gffIQxucIK\nV0bR94ZgMd5cIR5LXeMckuHobUL4zSY+Ddg4R6m+KDA6JB8C0Sn7chYFJ9Lt\nNES6Ji2K8hyvPOW+wbnOhh3uwK0wNgdwJnJniSelRHfCWYX1tU0u7ENX1frn\ncGEkKPJqo+oTFC65ftwP6Hftfk6z7MzmsH0VwfDiQm0VXUmWPtzbtfw3JBgK\nnqqNrnU0o0FzSDOlB/wX8aftaZQfZEk6nGbXIjtLLnGxJAUUiXeDeJhtGobI\nBJDa6Jk7j3WbaQPshl876jAUb0j7ChFG8Gl9szEFnCMOueqyvIVr5cHQFqRt\nDUs8\r\n=lYX5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdHSSOfu3N5oKSoDm/4/MP0aY1PGXeEYABeyTT6wGrFgIgJvMLiJxezHLaX2ViLRJZmGJ6NUTeFyCzBTPzJpUsQkQ="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a6576d69e2bd88a30093658e1651ba27bafe5740_1612540598742_0.9516157139344561"},"_hasShrinkwrap":false},"0.0.0-36c27956bf73cc168e81f4b221fe17e466843ccb":{"name":"react-image","version":"0.0.0-36c27956bf73cc168e81f4b221fe17e466843ccb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"36c27956bf73cc168e81f4b221fe17e466843ccb","_id":"react-image@0.0.0-36c27956bf73cc168e81f4b221fe17e466843ccb","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-canpW2p9mMbNVCwTDaSUPoQjbFwJAsbFnP0P5DKPRiPl6fdf1judO4Lpuu2xtPfMGXsN6+cdvagK/M5NZmrDTg==","shasum":"a5a7dae95208427df96217fa51608ad9caedf5c6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-36c27956bf73cc168e81f4b221fe17e466843ccb.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHtRNCRA9TVsSAnZWagAA/MEQAJcT/EogFJsqTEgDvMoi\nYb4q57NpMDN/wiCTmenET9uWQX7UcTxgA5syzIE/FTJDOYQe8r6QKfdElcjr\nEgCfgun0ypsFsHxFwKko30HOoCz9B+RgfhrWV27pVK7/1ndgOYWPrG/SC+pd\nizxoo8qB9h5Oii0vdMcc1tON+uQtrVW0d4dLQR23tFJi4Syz/H36+k5UjJfE\nM8nTaOnd2ZuHeABmIdJYEH7CfYyDPvbPsIjfp/Vh4rr18fZD2QJIuVtgEZv8\nHbBgLHO7it1YH2hLF88dcW/DRc7GQaeJUKZWLoS6br9ozyJ535tKSQSlD4jL\nHIWzyGj0XE/Bguu+uC5X0XLf5PzOAJPSeyFHe1hEVWVpw/4vVoc6YL1qQNq2\nCesZEmwb0h8dFrNP6J8cXJ1f++3EVC5G4zwLjuBF9QZ9Fzhv+unQKBjNIXYi\n/Zs7+cO+8jZhfNhA4YQTa6B8gA1Zow/Bkyyfriay76qFcMnGPK7N8m041OeJ\nqmbN9ERQr1PvE/VUR4CLUaOPdPfdnOMii62gPqjAy1aQkO/OF8/AxpdsX1HG\nR72FhW7g3Xy3gX74X6hy3cSSrw+hoKur4iMRHx55/4MWyAVbDNun4jafkR4g\nbM1nKdDwORan504FWvbe0rJW3TDiQ9T9IeJYGp8PCXE+Ovq2hF5fq5XVjg0J\nz7N/\r\n=m9Ix\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQf3P9iN3iYsIqDfEfxkRsXwkQAvr+uisGGCFBFOnvLAiEA3qaWivDWDT2mmQ+i4c4whv03XD0KZ2eDrt/aH3PtkYM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-36c27956bf73cc168e81f4b221fe17e466843ccb_1612633165285_0.08024850472101841"},"_hasShrinkwrap":false},"0.0.0-f89f97cc9619feaa09e2e36ed6c97fba97bfc36a":{"name":"react-image","version":"0.0.0-f89f97cc9619feaa09e2e36ed6c97fba97bfc36a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.14","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f89f97cc9619feaa09e2e36ed6c97fba97bfc36a","_id":"react-image@0.0.0-f89f97cc9619feaa09e2e36ed6c97fba97bfc36a","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-6+LrPBIQCKpb0rTGyrrTk5ehx8r0mMdh+d7i6YOLsKComZ15ESGT6gRUki2T/uDeEwJCBJBpCUJDj6UjwcBs7A==","shasum":"0799e2f87d25fcd2d59115f5a89b021a464350f1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f89f97cc9619feaa09e2e36ed6c97fba97bfc36a.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHuV3CRA9TVsSAnZWagAA+LcP/1OeNhrZa2Osfy8vztMn\nzLAD3lXrdwT2h36j8Nw7m11Y5Cq4PnSiMD8KOJbTC+zQiDMATBP01yTOAsGS\nFTsnSMPyHzAXlIEVYEht2Koy0AY16NeMha1KiUCvTVd0Zw0wTEtoLv3ELCub\nCH9/Jjx9mOl1vdEz89xrgD3d/X/VmUDWR7JAstVt/otUQtXJn35OaEFSWnBD\nk3LdgWnp93b4ZzfpY6nPVeYhnhoQJiN9J3+/R8EGAuFliPT2ADY7DDFAs+We\ngrChpTB/KNqjqWrvlDLzIB8qD1QDRcXOfcWwChKTCfriKtGWrG6Gj8m7p/Pc\n53d3peRM94PFQbEy1zNapaOJOKV+wbLpoSWui3CGpemAmDZ2jzH5sVIrzqx1\nMaomaNFmn6CeiGYDeoDazgHWFykdYOwqBCy8oPpVe/UkrgxIwTiu5XbM54jA\ny7308d/0qv7ou/MWlcsbAmUTF5gGC4CZBstx7ni4eJD4ZmOUEPKJv9opMdjx\nGjcBorJvmm+8eWm4+sp+xxHffxIpUmdAPOeI7IkYdmI4Ic2mVJAy8lS3LKYF\nH5k8apuKNcZAxO1tYb0zQB7CP9zaBxknBZGqHN1VoLSH2e3lacEIlFaaUbU6\nSzgNRCfuqjSjDmEgbjJNHQctcqhVrplI7o70CvoaacxErwOpDW3frVnhlWhI\nd5uB\r\n=cUtP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlB++klkVu9PZOKKIuJvPAY9hPXj8U+s1J5rV5alWsGAIgKULHavUyqR+UCDzWXehSVF6FTU7T0HQeIqjjyd9whhM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f89f97cc9619feaa09e2e36ed6c97fba97bfc36a_1612637559469_0.889839604066069"},"_hasShrinkwrap":false},"0.0.0-205b897fa4f4193759f54f6a2230c210d2adac9a":{"name":"react-image","version":"0.0.0-205b897fa4f4193759f54f6a2230c210d2adac9a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.15","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"205b897fa4f4193759f54f6a2230c210d2adac9a","_id":"react-image@0.0.0-205b897fa4f4193759f54f6a2230c210d2adac9a","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-CpeJxJJsfN79oso0G8cYOD9IY04siDjDUI4nNXn3jP5XtA6YYTKPQ3m3zqBiLLg2YQ3PTcWDtUNN126gu9bPcA==","shasum":"3440961be3b211d7603435d5d5a6080c21fb499e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-205b897fa4f4193759f54f6a2230c210d2adac9a.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIFF8CRA9TVsSAnZWagAAkEYP/ixuYVbcMQr1+annsi1H\nU5xhpzYZ9oXFzVaWudj7yvQP55EslHmUfLRuDdM7UKWpdQh3sXqz3ZBSxB2T\nHWRdGJhP1eAsh/maooTsS75UMPpGMrtFuHITuSctu9ZzNKD+/JJbx5eIve6d\n9DCSmDytHX2wUPwmCQo9ElmTKNjwAG6wWpixStoWTCt6qB4YgV+jG52vM/Dn\npuLcVTQKLbEr63aeYCL0k/38r4eksK6fU57IvEtsdod1E1qIUX2HbDkSoCxV\nF9dAuYIy+OxqVQOUgRksRX6WFahJLI1tzAtOgwX4UfOjvbymgcU+pdlqxzVx\nDlQLQaQi1Qy5XMYzMgo0uT1gfDn0eXHyP345oKPG0u6Lr0X9XIGS6BersLHD\nylb/Y5UMXqQabiqzGeGcyb6M26w3xAAKIsQqm1B/WxhLkCnuD69iZ0pbAmfq\nYEy/+vD3LLzR/CsTVwWgIqiA5vrdRoDwb9/563wg2G9urMm9WbZGCbJenBaK\nvCQGW2ZHgUOedbgcWlm4GEkp9T4DiCCFT7EKPs89Q6c2r1mogRpe8gSrqhpN\n66tIfZMLkzZn9gXLrXVjsl/C4IYZWbpB9ejcr9XtB1t1rY891/22Dym0/Mov\nfeUCM1VIzo8SpBlPOoTfuf0YQw51GJLl+W74jwZRKlSPbtARNzKuVJsmIPy1\n9z1v\r\n=1dN4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZiyofrZw4h4pPV0zOBps2OTVYwj1LJvca/GecFmGWFAiBX/YgUHkahpsMj0p9rsLcZ9SlTqjQe86hZ0Yn6Fb7k/g=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-205b897fa4f4193759f54f6a2230c210d2adac9a_1612730748418_0.06368064827413589"},"_hasShrinkwrap":false},"0.0.0-792496066d6d4772d2da2c3ceb0eda3067284440":{"name":"react-image","version":"0.0.0-792496066d6d4772d2da2c3ceb0eda3067284440","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.0","ts-loader":"8.0.16","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"792496066d6d4772d2da2c3ceb0eda3067284440","_id":"react-image@0.0.0-792496066d6d4772d2da2c3ceb0eda3067284440","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-T54WPXm/0WKiTUBZFUzqF+S7HKbWuaiYuRAAPCNuE+W03uBFnhC759n807BP8fEuOvtmqNoRSJUpggITH2MjJg==","shasum":"02a0d25f19f857725cbeec918c3a32f2b29b6f16","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-792496066d6d4772d2da2c3ceb0eda3067284440.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuEGCRA9TVsSAnZWagAA+QAP/0DLWOHZlOgCk6TQtNs1\nTgwdoPdIX4W2Dn7O9OL2K1YEmdfdOcenRi8ec8iX/J49AkOwquh8v3vnIYhv\nb7uuEs6FA7ZFsSDwURpzOtki/xUN6sMYL0CeZAewqpA3IgvaBLTB+nv8MUaS\nwWHpzmMIsLpOfMQ9mzts8EsYCus+sWsnIbTY8ZTI6jJn53VGsO2lNZW7A5jm\n2IuWDJFGVGtGu12PjYdEzdGHFPFWi/ArNtneH3kqmc1MPJxC7rk5BOTP1LrR\nRIuSVaUh6TTjozQRcUgvU31NnIqh8TVgdq9fYiS/jhQdz2om2g87M11t7X70\nKBGQCSx5hgZoj9BsrGvlReWi2YevL28/E/Gyt2QlNP1+DoZNWARBPkQtQsVJ\n71U5XhCZIEmKLac/W/fim/7MFYyME+sqV7ZSNO+XH/2n88aDj0lZalQkGyzD\n2mQkkAEEVyTytWbNII6h/3MGYEZatVIbTi8qD8thklcMCSfLu7q/rlryrCP0\nIwyhJ/zziQliMl74uOkESmjoT8Ssu5P/CucbgMVwwM9fXiB01KuRVNc/hZ9/\nDaVyithR5AAg8gs/nSwyhh+PjaPJpGUM71QTdB5CpmFnqIpL1ayUQL8Cc29t\neVn7+nmVw+asOt+Rc++1LjOEDH5oRp7WSPF31mbQ4RgTNkAtZbfH9+OsHXZ9\n7zcg\r\n=mA1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAu0kz0sGFLQlKL8QCCPRW8f+f5wsEBYclXgjUVxh0ZrAiEA77L3G/7dE1gcnGOz1p6UndTABkfVZmQ9rcd7MioAqWY="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-792496066d6d4772d2da2c3ceb0eda3067284440_1612898565666_0.3108699664425236"},"_hasShrinkwrap":false},"0.0.0-58f6769745a7da54adf64a3169f085b05bf8a3c8":{"name":"react-image","version":"0.0.0-58f6769745a7da54adf64a3169f085b05bf8a3c8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.16","typescript":"4.1.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"58f6769745a7da54adf64a3169f085b05bf8a3c8","_id":"react-image@0.0.0-58f6769745a7da54adf64a3169f085b05bf8a3c8","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-S91JRXY9ToeVlmKJQd8xHUkIF5iIR7MCKj67WGfTl/bGi9mhmAbEYnOddKQymY3omvDJ5zkBJG9kXnMdYmMwYQ==","shasum":"b3ce3ebf1383bb053e85ae157af1eb48c3798e37","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-58f6769745a7da54adf64a3169f085b05bf8a3c8.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJE16CRA9TVsSAnZWagAAx+AP/2qfhi/QQQV6hGPTNN7U\npBv6oTATmqeuQr1gjKAyLMB3KSzJpRK4pB7dWm1/z3a1P6DfkHUUB6BNFmMh\n45cvmW1u6hy4R1wrUFKNAfRwXT4L3k59BPLV3wMPkX6ZYTdb16ockyvuexxP\n8F++lJSP/ekNCzG2spO/c5Fr1Qz/2eV5RCfn2/FuirDVj388JGF6VGetmehm\nPcJLlknipDbgv9c78Xp/H9XQ3gT9J+RlQIb47IkdaNjRpXjPcRxrd18RzYVO\nVybQtKsW5Bb/twNiPwQOkKh+pQxocBX8FP2xSz7mTJ4xLCZ1Nj7WMOwVaWVP\nvM/Q0MZqxVmonwfnJa3knmMKLiECoRz0HQskt6Yoe89JlKY6GCNBaS33tHk0\noJ9qEQ0MlXUOGBRkQYb7yv9i86kQC7kF6/AtAxv0Fm9eE9n1AQMdbEcl8YK8\nF6Adl7xk4+B8FXVEAnQ62gk8zIk/ap/DLjOKRh1zMxjMiNSW9p+nmiToskzw\nQjC50s+SJt428TepF4HLio24yd6DyR7R55EklqZcns+ZuI8hLuhINkzWRc5q\nMl7kuZXb2AngqmDcalLd4yhvU4RFxI9nXPbFns0B0uRM9OYFmuSPY1xDoR1T\n0eajrwo9uMOyIr/BzCBERzjva81q/02ohwtqJWx34CO82BENJ6bK48y4j9LV\nHvBw\r\n=shoH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrVJDZXhBeaaikruQzOGSZdMK4MAAkPob7UhbeuKkPaAIhAOryfGtLAfeMMZGRr+HpSSL+2S6xCmiQtM22nN4v698z"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-58f6769745a7da54adf64a3169f085b05bf8a3c8_1612991865900_0.5566491312075268"},"_hasShrinkwrap":false},"0.0.0-bcf98dd3ea27a32821eebdcf6ab9a115a5238b5b":{"name":"react-image","version":"0.0.0-bcf98dd3ea27a32821eebdcf6ab9a115a5238b5b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.16","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"bcf98dd3ea27a32821eebdcf6ab9a115a5238b5b","_id":"react-image@0.0.0-bcf98dd3ea27a32821eebdcf6ab9a115a5238b5b","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-wB1YgboVf8KqBcQEsrA+n8EkY4dUydajYSe6VipSwLzI9sQMlXCy3YuGjaxPVJztypRtEz+rDCOWRhXH2ElhUA==","shasum":"bb613309aba78024f788dd835725c4c5168252e6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-bcf98dd3ea27a32821eebdcf6ab9a115a5238b5b.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJFjsCRA9TVsSAnZWagAALtsP/202zDkfWOc0hX7XxJ7Q\nj5Qd6DGBbZGo0fnNHb2IxgG4EKaTl105NqyuZyIz7C3kqIRYyKb8OWRKDJww\njgcgJ5J3YqnVd7uneWBOBIIb1P9JF7lXg4+23YXbeZ0/j6ZQqwF1ms1Bv0Ku\nNEECfMyxZviQdeEPQtFekcF/5l+pUTF7oUIDBSAEIHNB1q2DTaM2TOHPuYGE\nJR6I7jkcJsfLQc5+Xv5fAMMtZybVhiz3KNCLk+yvOqGVPCeiNqJvQV032+/c\n6eoHcLZzwD1e/QJGwshChcDj29k6kIomaeZnlM01Uj1Ke5o6THz51nC1xWUL\ni445wgincTNWfGgsIWsN8EBtYOhEx91j/trs1barkwW48ZPIp9xd7hsUgduw\n7we1+D6qvJTfNZnwhZ0GyiZ8xQw9Xhl5ta/ze9gxRestZtRD6067a1oKg/xi\n3/jCLBXaYyDl1a5Oo6DMBvphcqaGAcLQ+p0Svwvzrva+8KgwDtEoZWbVlVBm\nZzhZOHMKvuI8GBRswcJFbAjHoqxk2hgougmVuoP/8PGhXnun0lun6Hj/01OO\nI7KEJZbG0puKGNPwDtfGJhAdN9oaxIqFALmdiM6fYs0v8mHfms86zFK93zG/\nhMPfwMQhP3JAj+HIcYlPrdnPCAMBeru9zRpAIPk9JPQd5sAq+dofyQ/Yikyy\nq5+D\r\n=uxCQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAC0lbZmuuRYtwhw5tWV1HVVDfX/uXxd+Q/jeDgbQToMAiBlwbEPp7Jh/c27xOQua1/qDUNC/t6FRb8xBo+wX5eRkw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-bcf98dd3ea27a32821eebdcf6ab9a115a5238b5b_1612994796103_0.6612125038489542"},"_hasShrinkwrap":false},"0.0.0-0ba40de19c20384ec27315502b3670fc3430322e":{"name":"react-image","version":"0.0.0-0ba40de19c20384ec27315502b3670fc3430322e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0ba40de19c20384ec27315502b3670fc3430322e","_id":"react-image@0.0.0-0ba40de19c20384ec27315502b3670fc3430322e","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-U9uwe1rqqJ3Cw6yGQXoyMM1gbBiDiljyG59PeyxCc9sFBMnwUEDSOdvEkV9wiryG3t40mQM+DruT4HbXuUPI6g==","shasum":"7bac85371a289f9b59c1be49e45cd990f8cb75c7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0ba40de19c20384ec27315502b3670fc3430322e.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJc5XCRA9TVsSAnZWagAAvHsP/1PR+8hGDDMVRFxdtrvz\nAqeFYr1PAnXnlK3JwOhQ81Q9EzBptLSIM7X9Rrtj1AVFv0AMlyTAL+RXAmd1\nkE7W1ie9AoRZO2EFsjtgZGlXrC6EMXDb+AfOLoI61V84W4Uonmd25TicVR+t\nhafUQKSPKFrrr2Rbi2f7X58OyLTH+0bknllsxeXEQqI/46ex/qrpdsDXudF/\n3gg2yPvSABLNfFIWxI1dzU9wpOEkWRxlybnfVGj4i9UB+0Bs8U39aE/ve9Ki\neTdsDTvSBZmUBH4nd/g53Ijc7HH1yzFc36Yqa9ChW+rQW47mPHwwcvo+9NiZ\niCOddeiKZjcK3mHV8IhL8P5oNJsTFBAZsKV73k2yF72jiwisikGx3b4l8pT4\nC0Kd/95VebDg8Hu3958hyuCUBQlA1zf9rifg9uSuZDLpzPriPWBZvJcREHP9\n16QbARqirZi+Jzuq9DM4/Ngg4BeC4IKOGUuiRa/p8mnvjBaFXIBPTmVgb1oD\nTkaO4aeMaK4VRXYJofOiN83A2/LY3qL6N2anlYMJXXxoB3dZKTxnVXn2iPdY\nTVSbBITEP32Zz20Yvc0efivU4yRST4r4a8rzoGtIuz9iQb60elZIvhVJJ+Cw\neWmXhIm/v/ZSGXQfoNi1BS539VXZPvRdHyj9J7W0PMJb6sy7fEzkGeoRPb+a\nH9nN\r\n=cRuW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC4Ev80ovDXZWjQanhX//JSLnyHmO7K+lVISVbPScsswIgPiXI+2wUZWzQo/Yi1A1zZ1utNaZvDXC9T9EpWAEkc9o="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0ba40de19c20384ec27315502b3670fc3430322e_1613090391279_0.7728186480390478"},"_hasShrinkwrap":false},"0.0.0-5bbeb0a479db65113d89e142435bd73d96d2476b":{"name":"react-image","version":"0.0.0-5bbeb0a479db65113d89e142435bd73d96d2476b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.16","@babel/core":"7.12.16","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.16","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.16","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.1","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5bbeb0a479db65113d89e142435bd73d96d2476b","_id":"react-image@0.0.0-5bbeb0a479db65113d89e142435bd73d96d2476b","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-g3JIA2q8XKWICiF0VBEfDlUDxUuzbZDIeRdXb3vSk1Pp4OhfoMjiD4lEKkgNpQyKRP2fMxKzHAptuRltOHT8Hg==","shasum":"f1b26449ce7f5fe47ae8067510ea4c300395043e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5bbeb0a479db65113d89e142435bd73d96d2476b.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJ22jCRA9TVsSAnZWagAAr9gP/jNPo742tUTcyNYU+Mom\nFmqdMYTsGJj4Vynanz1PEF5gHTsMdJYgUmzV2FrEjI25b538+crUawRbGDU2\neTOGMEpvZRL1zBRhOUUun2KO7zdj2dG0eY4HpSXFlha+7zIGVMLM0gx1cUCt\nZEFh86c/mJjIRVxw0yBGbL0qz+gARv7wnACvRslMNqf0tb0Gk5laDLpZWJ8B\nlif8AC/N4xO6S2nXrl0sOpHvm291Nq9rRqypRGd0GDu11O7G4AKJ5AM2Jk8g\nRAzl8FVSD6IFmj0w6TP1CXRYt7aXNC2kD2G/cGCmQY1ooi6KtVpZjsBgRZ1B\nN7S757JrII1pji/LhIai/VRn0zGBeqfGeAzrVeZEcbl4YkfrBiGZ9eZf994K\nM5uhtfODylKSdFHM7EJTA5HUm3yDE+8BUNA5PEMqC0T5ReVzgYJqBDi8sWWj\nUx4lQbQt2pgRiTZHqGgwPvqGmLVrND9RjFHBHQFgULs32Jn2bMcHec8sQ7oL\ny03+hp6CjnlBT2NLAMPI/ZXGAeRGv9F5hbjiY4ng4wWWFTgRZEyy8Uw/m7YQ\nYvBwtScqqC6NyJGFUloARF7LZ7wcF3DsTvNxkIRFl/8NptK7GCFkxWlzPeAw\nabfJlLIQI7H9xyVl+eFSR0dxm1q53FRV97rFK7tuCJbba/SD7YkeWrG8Qw/7\nqDX9\r\n=SNV4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8TyxtZlBG5Patp4gCwYVvP9Xv9B4qrbIqTV7mEbp0tgIhAOww47SQUT6IHuGGltrzB7ED3I4GCoO+xLFAZL+9+qu0"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5bbeb0a479db65113d89e142435bd73d96d2476b_1613196706505_0.7862249844530977"},"_hasShrinkwrap":false},"0.0.0-15d0686ee5c8c7c2db0793de44454fedbadd8805":{"name":"react-image","version":"0.0.0-15d0686ee5c8c7c2db0793de44454fedbadd8805","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.16","@babel/core":"7.12.16","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.16","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.16","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"15d0686ee5c8c7c2db0793de44454fedbadd8805","_id":"react-image@0.0.0-15d0686ee5c8c7c2db0793de44454fedbadd8805","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-Bf6uh0fb6yYpAP6Juf3NcTp3ImaJrNEuG2cl20fUleiKBJf5kq/wTKrECjB1y9iMOKdX2QoZQZG6kn0bLAFmcQ==","shasum":"9de01c532b7d4b3ac9b6aae3b6e100c8ced38988","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-15d0686ee5c8c7c2db0793de44454fedbadd8805.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKNG1CRA9TVsSAnZWagAA7UUP/1sWfF2OIRUMnE8ywgLs\nj7mT/J66WBLEVZKi35JsOYQS77/YYXbshwA0BZ+A9ToLCz5++GBq2K87L4ei\nHC/pRD5yaB4yT72w5T2ShrrftF07UCen1E7N0Lmny3wxiH+istDu7sVHxSYO\n/dBFrBTKx+bAN61sNyZXFMKMC6cnoZoFZvMpZMegEFazSC69+hqTTG7Ok85b\nvYkfY+vikKVjhfEZFlzz5c6ZE6uVAT6JrDzJA1psnbib/ZKmow+cVjTBsY/x\n6Mf9bkrjDJEQ4+iqP+3/nRBvkyq179ht2FrpkX19TMZTgfjjr15PPN6qGkhA\nzrsDnZXC3Kks1CP1CIbFhEwbs+QDDFYz2e1nm3qJs3RLx9Vk/6pvY3mHSmq8\njJ9wTqcaImgs9JOJcDpUTJ6UkFEtp6FiGAeOXp9VAjQpEAtlm5qUZeDWHOzg\nzAOWOMAJh17yd4+qrKoAdObWuEJPSs3FCVVErPHoGrETRcXdSxPOLOFpCXEg\n4n2oN9K9xnoLuVWcThqFrLeYU8qwMVL0SI3nMURDtrUSdltD7BoohCCoyNkK\n8GYpFIHpMTqibLYbCgfx/JkIidHED50deBfhgM/wmIYPQr+hsZnZN7jDqZ+a\ndznHaSYIxCzzmE5MZT4lCyP3+dnSf4FI/wbIxwIYnSydQL4EHW4XKRUa+shx\nbVJI\r\n=xkZS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEU8oOWbBxyowBatclwGf58du4VyblwLqFqhS3eCFocWAiEA8I5zTkMQwaYmD5+Y0AjekZrKVw3QwWbBxJ8Y5GLZXVc="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-15d0686ee5c8c7c2db0793de44454fedbadd8805_1613287860558_0.7996348266464488"},"_hasShrinkwrap":false},"0.0.0-1e9f07f2399a24cd2c7d66df56bd1b98debe323e":{"name":"react-image","version":"0.0.0-1e9f07f2399a24cd2c7d66df56bd1b98debe323e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.16","@babel/core":"7.12.16","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.16","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.16","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.38.5","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1e9f07f2399a24cd2c7d66df56bd1b98debe323e","_id":"react-image@0.0.0-1e9f07f2399a24cd2c7d66df56bd1b98debe323e","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-gc1oQsmM5fkh5xsVj8a4Tt/4u9ZVgMWWdE2uxne2VRG5vfK+i3jhLs/6vh2+el7fEfLPB/npC6+kFScPqfhzvw==","shasum":"13d5a8a893493bf62f284145f974122c29afe170","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1e9f07f2399a24cd2c7d66df56bd1b98debe323e.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKN7ACRA9TVsSAnZWagAAD64QAI3ZvSDiQpwiQx4GFfCh\nLYdR9A78ebDp8SEz2nwZZdIv0+aCqw1LSUwKM6VGzoJ9KSxz8p2XP5KA47ih\n1dQE0MGaOqVtUtDQ6qJvoapH5pEsH4WS4ypo5cC65D9PZaABm/5Wtvu1c86T\nD1n4lv+GoGo3lZV/tDGg0T+2TA2IcBax87x1mrnuRgkS6qbDVGSqAWHiZxjF\nSpEfI5VFW1axriMHnBnwuUwn86fl52JO5ooitsrkCUIahygcbbz8Yl90ELLH\n/reKBPTj189UJPpKQtKbAEtVSwc5eCIyZ31F5Y8E/jsUcDKZTuYELeAuExak\nE9vXVqERIl0Hi5nMnEluw09gQqUe86iUQ5FsvgVBDOYh/LxvtG4PVEOQO1Hv\nTZFzFYnM0vJt+fok0BXI7FFxdLt1ySKLDOmHR9FOFTannwLHbxR3u5QmNfih\n0DrH0mn1tjqsSTM4rcIjwCrKV4ORAUHnHYS2GOLEiqbS9Ja+WSjGSWSjo61V\nqjHNVKpK4hQEkti2dxN5pCS24UX5p8JLYEhoSgzvUZmO875rXFYd10AQ4NoO\nyFcHjWy55c7U5FyqCsfMVf/tVe+q3ChxUVNJg6NNhCXxI+K5PukiGpPDO+u0\niJHLxiP6kUntZ/qNv42NMYpdjC9d1J964sgbB/vtJt+OFQbl2BglIgQmzODd\ntPJJ\r\n=p+NG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGfyuYm7NwfdUf5yLiJQssckxEkBwP9rvH6NNADrsC8AIhAJ8XjeTqdXv/W76U6/9tBT4PV00jlHPH2LfejL3qUuBv"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1e9f07f2399a24cd2c7d66df56bd1b98debe323e_1613291199872_0.5802394906512691"},"_hasShrinkwrap":false},"0.0.0-58aa5107b14137052d83b824eb3314ffe686f470":{"name":"react-image","version":"0.0.0-58aa5107b14137052d83b824eb3314ffe686f470","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.16","@babel/core":"7.12.16","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.16","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.16","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.39.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"58aa5107b14137052d83b824eb3314ffe686f470","_id":"react-image@0.0.0-58aa5107b14137052d83b824eb3314ffe686f470","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-7FR6MjTEJCui6Wy7xdhwQ4LqdBbb0FT/RxmBSZgmA3xVvE/yFdgFxHMfOPMjQ3t+v3y5epxuXnfPSVmZPvO/jw==","shasum":"58d3030d707d30a07a3dcb342c95a71e8d1b4096","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-58aa5107b14137052d83b824eb3314ffe686f470.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKlmBCRA9TVsSAnZWagAAiRQQAJ3e0zDtxiUaQBmNtoMU\np/uay/VjpXCYoudp7KitAVkkNGRL2UyPmDahi0dGoPlwfZdyvzRFbNmwG/UQ\nLl2fcuysGqrh2w/vXCOSGIrT+DvIxHMULPqjW9Y96SLjKxQru35b1b7c/nn+\njxsAw+RpfSwDSr1/QE4/UCiGlsFiTzI1BLgxhXn0nB4k/qRky1ymoH1tVaWb\nhbIDwX76BR57GzNCEcSAopx5TOl1ntn7kPOH5TTV7t4NvP5kUM/zFGgGcaF3\nL+oZs3V2BynqNVzkivruqG64H9kDgqOX1f20sK3TvNT1JNoT1Z/4KpR+kU5A\nddbfw3CYKajJ1WloOW/EqnI9MMLvaPa32/PMszUahCDZoRd2N5IiV4JFmXgm\ndQH1lH58A3boyFRkAP/RZCrYJaMQlXvFdYj1GkAnbwaUDaM3Dby8bZawNrOU\nCSggMV7EV+MoUQMQ/j0/5nzv94nnlUdPeypxX8oqjmT/kp1Ek+KZ16vmWX/A\n3r3EF179kT2MfRLOzKl2NslbMsD2fGHnTGfm7TVwg+FqMiAQnUdYtCVbJJi5\nKdQOQLZvkpsb+zZNDfqdX4oVb1bjJuhm0+OQaB1ug2qHIw292gamgzwbpOaK\nrwiJxoDVjy6qYBE+Ad3bIm02RS/3LHusvTstOnZmZ2q0dzVUeE3RSw4Dc2ME\nXazE\r\n=Nz92\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANK9Ej89W+yA+0Gf91wGlj+sMicICEnQCe2lk23PIy9AiEAqF+H6RZ3zhiht9RKSQGDW+JhIIrMGZlw2H8MB11JJCk="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-58aa5107b14137052d83b824eb3314ffe686f470_1613388160863_0.12002657730767008"},"_hasShrinkwrap":false},"0.0.0-612654473b6460379a226037bf9fbabbc4faf9e7":{"name":"react-image","version":"0.0.0-612654473b6460379a226037bf9fbabbc4faf9e7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.16","@babel/core":"7.12.16","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.16","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.16","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.1","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.39.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"612654473b6460379a226037bf9fbabbc4faf9e7","_id":"react-image@0.0.0-612654473b6460379a226037bf9fbabbc4faf9e7","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-hYd1JbS/QATOuZSzufuOFxrweTw0QEMb2g2CG8iW1g1oqHAPz9VXaPsMzdRwZkOYkswN68nSAP79N9t+8RT6BA==","shasum":"8135280676046f935eaf34534c5e7f84f91765a7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-612654473b6460379a226037bf9fbabbc4faf9e7.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgK8I9CRA9TVsSAnZWagAAPHUQAItClTWq5pH7NPM5K7oE\n6f5SULM2vpQoTzY6CHOY4NsbBHV+0+rtApEl45aKvFmBKr9L6I8YN1iHhaka\n6EQIIoEAlFeT8/ZNMefcUZm33N7JfajFp09MicVLp3fBJZm3t8ogDloCvNN6\n0MkFz/I8Ck+YO2XqvVc2j5yuBpcKBIHIwCm/gITouYLt3tq45Q2mk60IIOJ8\nFr5Z6CzlNmIzdMCcHgYQlbkid9BH/frYE7r0a4G2ZpXadoTCu7BUlfZ5ACwb\nPRw8QSBydH0DGj+s/EAJOZjMHLlpr3gXgr68IpiL+CFYIKYnijBXPqpzVXUs\nEElVkt9VkHh4pwvOD26/ZJ1FOjs9YV7lMKGLhuzjGgOQ24+miv0J9lbsqXBl\n0nS6x+sGca/w2VaytP0IvKC8WlH3NbbqqhBHIaF3OEVVxY924iwaRfHzGSjP\nTlcR+VTut7Q17qtr95tfRdRIWwLBLrnPzsrwwvxRHCv5/3EfFez9AqCmGUQL\nLD5BaGfbB7kshPVTDFfEnsxbHBxZ5lrWCFb/5A1FxJVTEGy57IvV+1UCNLlq\nw+0o0l6aQq1CSrmjgvHMlCgg2Ka+qDtkOcHVI/sZGHzceVhW/kI++9IFnN9N\nlHCWYyxc6dwe1esCeBvTGsGfFQTBGpEQdpzwj9dZqNOQXPHWNYlL7IUDL6H9\nYrue\r\n=zW6y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHpD97ZxK6FYlWBooomescRajEzfJVg8XbMNl6j0yh8OAiEA0v/4zqWzQoeF82TkHRtKZUiMCRg9Rr1Yhtzrx33hOK4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-612654473b6460379a226037bf9fbabbc4faf9e7_1613480508653_0.003783574196551731"},"_hasShrinkwrap":false},"0.0.0-c4eecee0498f2b114679cf4ef053cc884e9ad098":{"name":"react-image","version":"0.0.0-c4eecee0498f2b114679cf4ef053cc884e9ad098","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.16","@babel/core":"7.12.16","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.15","@babel/preset-env":"7.12.16","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.16","@babel/runtime":"7.12.13","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.39.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c4eecee0498f2b114679cf4ef053cc884e9ad098","_id":"react-image@0.0.0-c4eecee0498f2b114679cf4ef053cc884e9ad098","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-2tEyE+e5DH2cZcRTKVKsytSR6bbx+f7Syt2c9RXof98pw0T/MMCeJJrmdH8aklefnnvk3JIMdTPlPLsXFiSHnQ==","shasum":"86758222dbb32519e8eb6b6fef62d555852d6d84","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c4eecee0498f2b114679cf4ef053cc884e9ad098.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL/GfCRA9TVsSAnZWagAAMt0P/AkjNKCfKgvWSeplM0/2\ngZ9V75inK5tcT+SHaH+xp0oxysaVDI8OD/F4Cm24+C1qNvEfUoK1Y9euwFX5\nJNGgc1YUXMwSZOj660K2idKH/NNKQDC4WQ5gTc7oktppDCfFPjukIWKakxDp\n1AdVXRQcA5CA6hW55lx45sSVUYFsKcIB7TV3wFOr0gS6+/yv6EmPuz0YK2Ym\nchjA7UFJn7awtdEe7oChYlOq5niTJH22JM+ELNTRe7owyZdLUBowrqpGlz6S\nwmRMtOpqqWK1dfSG74dAqqE63+sCvKGJFp3mqlnuZaBHlK2UfcPJHoeFOvay\nyNlQ2FhGnJ4R+ArqWM68OhSw6otj3YOnQQMCp/nhhv2uVlBKiDD+C0k7h+NK\nfujv2l6pS8a9CqbmXshvSgVZwWk7T+VevvLqZm+Ox1VaSyi/8KRhdUZNJK9K\nMUJgNAamtEmJO8xxdoKFI6tSW79U/hKzh/U9CKfVJnWUo40LoJuGhUF/iQZA\n77uTpWDqqjFjrGT7q6/R5BlOoRj3pv9M9ozs6WNU2jepEzIJYXgUv4qJS6sO\ng3JNyiCStXDJfmLSsXvYPvtPp4worhD92BWbGBAQ/gFWC93uWOwfp/Of86UJ\nUakxFHJr/gq4neYruLOGNeBhQGaPGtz0GiL8W79JtkR7TGA+8qVK5bXcYzhJ\n75et\r\n=w/HI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKfe3CQbvzlZoSJgm4AQRWHR3nA9v3rmQq1H7cpzxe/AiEA0WmznS+AHiUZghJtu4ZlZHNCF0VJZ7nliiB9/21LuRE="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c4eecee0498f2b114679cf4ef053cc884e9ad098_1613754783472_0.8699388869535816"},"_hasShrinkwrap":false},"0.0.0-98f71c71663a706040646e8764f257f94fe8778a":{"name":"react-image","version":"0.0.0-98f71c71663a706040646e8764f257f94fe8778a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.17","@babel/core":"7.12.17","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.17","@babel/preset-env":"7.12.17","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.17","@babel/runtime":"7.12.18","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.39.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"98f71c71663a706040646e8764f257f94fe8778a","_id":"react-image@0.0.0-98f71c71663a706040646e8764f257f94fe8778a","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-t9lvQLTBvmMs8NCt61zJ25O6HB6hhsNg2GjbQxUybml/pCwky8l8G/Gz3Q5PeJ1d1D2i8THc4W0H9rbC/A0iLw==","shasum":"32b1c322f6b67ef10594e1bb657d4d690b0cb1d1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-98f71c71663a706040646e8764f257f94fe8778a.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMXphCRA9TVsSAnZWagAAj1UP/Rz2L64KhcvkPtrRjAPJ\nMP4FRBmTGedjVGGefYgrxzv2Hop+W6+nJO/uS7fy9mM0YpEmolWeL3qwHCb3\nUCvyAL7w6JoeKw23bQfVwUm3Fm3vcp3bRpLTdZzzui6kcgWkcsekFk+9oDNv\nbgNzI3cfYnVqoteqcu2K0lfCav8BaQSaFYehhdjazFieRefO4yi39T6Cv598\n9aaMy/fdbLPPFFu5BaMEZUzSqgGsGidJesyq3o8+LISaMdaGmsuxwBnu06jh\nI/L92yenSDfp1q2M5kV9Bw115RJBez5BZnPs77WT0QJp0PJmud2NaY3hax/q\npwzJGvhkypnrxU7W1dewHgIkupxOV6ejc4OywdtnXFnxh/3DFaXKAb1Smt+O\nZ8vU1vg7K/1KEnlBgNfOSIw9M42KxSHYO0wqSDEcz92me0FyPZqQMpDugZuC\ncEo00JYW+8/XSVPKAT0ZbYdz9JOdTKKlqEE/w1cDvihlTy1PJJM8JHYR1fP9\nofUohMR0smVBPuvl5FojLkLgQprTxdykijfRHgBNDB3be6Mr2N6rQneX7eQd\nnW0JtUS77wDTRsG2GbFt9BmKCqRJ1qEZCHOUEcE7bSNVMrrfsqlZw0U9elKU\nD+ZXqltU78whKJMbuQl5VseyVdVDBj+xbldsRg5IQVZMw93aQQg6/P1G8wr+\ndzH6\r\n=OQTq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0F+tue/7OL38TCCY7pgs98+bvLEQAS9Z0a9Rv99rPZAiAMw96kda2IY+EVVEPikrYh6madWbt3vFmvM+46F6FToA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-98f71c71663a706040646e8764f257f94fe8778a_1613855329403_0.1805587773772186"},"_hasShrinkwrap":false},"0.0.0-07b5cdd6bdbce54286862c7363e4482037e4b93d":{"name":"react-image","version":"0.0.0-07b5cdd6bdbce54286862c7363e4482037e4b93d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.12.17","@babel/core":"7.12.17","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-object-rest-spread":"7.12.13","@babel/plugin-transform-runtime":"7.12.17","@babel/preset-env":"7.12.17","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.17","@babel/runtime":"7.12.18","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.39.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"07b5cdd6bdbce54286862c7363e4482037e4b93d","_id":"react-image@0.0.0-07b5cdd6bdbce54286862c7363e4482037e4b93d","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-KCTG3vhuXd+kfrCB53QVvnTfNYYP75+G/5kqEBnPt+aQBvdEJcwr10ylo7TszPDf84Z+8JpxJEZ8DusuxDey9Q==","shasum":"47d87071914b9b82bd8336f1dc44efb542f168b1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-07b5cdd6bdbce54286862c7363e4482037e4b93d.tgz","fileCount":20,"unpackedSize":38173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNj5cCRA9TVsSAnZWagAAxegP/3sumQJL2brSFFUrUy6M\nE09TjKNIRdzntsh5DoVpqvqPJgYCyKRq8uVok2hxUKDirjSHkFS/33LEayo7\nLIg9T/M16IljyXMNhnUl/mlw9gXnKroI82eE2vM9NWc34rZypDL2+K0va5p+\naxh5qsles9+BV8+WXw5G9xK2Cwlquy3xLbvKkJXvZyEWOKdUQJV9h1rCcPkh\nI0E4WOvNikFAV/G2GJBwupCAAgIcZtl14NL2WjO1sTkp9lmzEksUthG9tHyi\narbSjlbE5UGtj4GGKhu0ZVlzhaHEoaDPGR1+p6nV394KQnSmT2hy8OWv3jMM\nmO+K9+Xi4ipIqe16WVTgq+2z1B0B7hz9WfTI6viUvbo6EgWK2LU0TFaKMwUY\nPMBoxUJ+UOSymFawZ7pvVnPYQdMyBKErv64STzRUtj3C8kKVHyp8UhyXypNI\n9WNjBH/TYOoLzsmer8uqwE2lnJH5hC0NIHzI3WIa/NG2OIz5WW3bIifqt5T3\ndc9pFQhwZtsyV8KssFQN0i5ux3liE4IWVxStRqSA9azzmB3BfVahXNL2JaQ6\nIxpGgLbFZWZYjJRxfsAGOKwze4SxrJX3PsvC+okB5Aw1mmwNNRnWbr9iuxrL\n0Os+DiOcuV9wbqxcBAOGtBX2NnHmWWGCZ6uZNZVr3VkxoW2jvsRvbRRqVDFH\nr9hj\r\n=A8x2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjNaF7h1Of+JIy87GE6UanVd0FaHDwscLQUlsjrLBcsAiAgZYMIxmjJQ4fO8kvksKUpy0An/zX2V3ydD+rW8wAGFA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-07b5cdd6bdbce54286862c7363e4482037e4b93d_1614167643808_0.08631151964134687"},"_hasShrinkwrap":false},"0.0.0-f7bbfa4739d8b4f0818162ee52512d9f24bad87b":{"name":"react-image","version":"0.0.0-f7bbfa4739d8b4f0818162ee52512d9f24bad87b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.1","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.0","@babel/plugin-transform-runtime":"7.13.7","@babel/preset-env":"7.13.5","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.7","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.39.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.1","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f7bbfa4739d8b4f0818162ee52512d9f24bad87b","_id":"react-image@0.0.0-f7bbfa4739d8b4f0818162ee52512d9f24bad87b","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-RkFZMjpYtWOnQF1HceCSAvsvUhcZbl68+bbSqC2Ma5tIL/F+iuX+DcXs8hjs5sdoZgmxXZuwlbF3jaHSGyyMuw==","shasum":"e6e7914ea0f9d1450f934ab48a473714e8ed8fd4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f7bbfa4739d8b4f0818162ee52512d9f24bad87b.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN7OaCRA9TVsSAnZWagAAOZkP/39+oSKGWEXXTw1w63gX\ncmrgcFlz0Fg965O/iGk2Zdlv4qWAYFS3qUF++Up06CILW+Lf+bzeSyUR9aS2\n6JL+9qJtPl3wz8YkkMc90nLgrTx7nKf84hsC3+BCT99mRBqrf8n0ocoXoOC/\nZyCwqt8SzqmBpRiXi4ax360z2AWNQ8zb2QNlczVAgMwg8SHABYjYcFTGHt8x\n1aZPkoIeMYkVJAoxoD6sj2bAg0beRbbiRK4oUkPQ705w2aqYnxNjvYKWywJi\nPZ86DWKDppL+pzc/8FYOn+HrHxCE+7atYzo/1Vk7pLI9Az+sYweuF8QHoC0m\nayNK+2DbpddA2SKqrP5M7wZtBp4sQA1NZrbbpAtwcZmScQn749vR8Nz/T7cF\niqJNi8i0A43hdeM4s+CvJ2uCbN255W3dt28Xaz1OgAqy9uh91ESG3cPbtY+e\nqRrB5BHkdcN8Gxk9SCgMCjDUidsaqGnhz9qSFRxyYVX8TRsKvrezR0+nvOIE\netsPd9VoHBI617HZ2jRk9pPvpdM0N1JVXAnwjC9yERDMyVd5y3Il5r7jcLfp\nn3RHu4yseWybqcBdhtWL6lGROOZlKmS3CDQ7mc/i4caHrXYSfGTMZVUfFHfq\nM3r698Pu6R3sSp+P/2a2Et0TFZNm5q5HdZEvo68suYFgEfasibDTAL6/GXS8\njPRp\r\n=Oi16\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCr3Csxof3RVel86ELz2EXNUVclEH6KcPnOGxcb9YuhagIgP/UYf4RriXSOV1iNdNZKWkNdkLjpKN9R2wOZR7jGGhE="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f7bbfa4739d8b4f0818162ee52512d9f24bad87b_1614263193779_0.267345489284057"},"_hasShrinkwrap":false},"0.0.0-d75046d0780b9ced3e060a01ee2132e5e669550a":{"name":"react-image","version":"0.0.0-d75046d0780b9ced3e060a01ee2132e5e669550a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.1","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.0","@babel/plugin-transform-runtime":"7.13.7","@babel/preset-env":"7.13.5","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.7","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.39.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.2","ts-loader":"8.0.17","typescript":"4.1.5","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d75046d0780b9ced3e060a01ee2132e5e669550a","_id":"react-image@0.0.0-d75046d0780b9ced3e060a01ee2132e5e669550a","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-lebQoPTl76o4YVJF2Krj523TYkQFIAnOaiLmFI/5nQF4QXFXW1bLYd7HpVjroNyW6Sde7SNXwyllZOuk4J6tCQ==","shasum":"d5ad72c7e361fcde94ad9c94081a89ff8fee8421","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d75046d0780b9ced3e060a01ee2132e5e669550a.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN9JKCRA9TVsSAnZWagAABm8P/RMVaMmvazmp1IvwTRU7\nxiLwPhuhZLR65+9geRoMWQ8nKMFMoNRSVUT23pkkShJVIlvSpwuSIRZlLaLs\nyihS98qnBqqVHlgzcekBr2O5rcKtqA8pz+OXsE/lqAnbg1GGO+zSNQV7VOsT\nkKEMWio7b7P+oWrEcnd7OzV5pqzkPqza6shgjOtF4d+H8g94vWUL8WNlL9bM\nAcZ1s5xxP8XKwISLBL08mpy4cnr30IpoANMvGeUIZupqs1W2r504kcRaVSnz\nJjFWxV1Jxusa96XgCpH07/vW+yQgbRxuNRxywDBMSuKtBrR1iDPvfDcXBqED\n+93lhQXKV/BOA/BqmNj1Q8bz1QUkCCAvMv4DXD8YuwGDLovJLQOufF28Rs7S\nbCGnTtNr4LEjMLZq1Q8SPSODtzX3YOCk2OAdeYKl0pVz3/zZIYQZs/0+HI+I\nUoer+rdiufEFCeYYKpjgUUQz48LcZksdkVDxcpuWa/odVBQXWUZ3xlEPS8N2\noA/4rCG757myAp3+uUT88pdo+iTv+2aN6sjT9uyPpTcGcLPv4JSwMWx4E7J5\nxz/YMqt/HTajh2uVFWJHdCt8WhwHt4UYW2Wdh3dSR4sjIG9PUrN5MD7LPFAt\nX77w7LBn30sgX0CjZJqNZtuAIxh7cZi4rZxlp6WpxHZi1D41z3GTnICY+xHh\n/wXR\r\n=KouU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoFRlI67cJErp7etohCyuTZJqa9c3fyYimSxfs68gGSAIgIm7G6dwX3qvJWbJDt3gFFWczHGhgUdPhhbKtZoRQ0sM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d75046d0780b9ced3e060a01ee2132e5e669550a_1614271050449_0.05190899248038683"},"_hasShrinkwrap":false},"0.0.0-230f04a4a319772a3f945a16f91066c7925454a8":{"name":"react-image","version":"0.0.0-230f04a4a319772a3f945a16f91066c7925454a8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.1","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.0","@babel/plugin-transform-runtime":"7.13.7","@babel/preset-env":"7.13.5","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.7","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.39.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.2","ts-loader":"8.0.17","typescript":"4.2.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"230f04a4a319772a3f945a16f91066c7925454a8","_id":"react-image@0.0.0-230f04a4a319772a3f945a16f91066c7925454a8","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-T+mP1CdFsP3WBbdhTCaKjUMkSK5rIoteAP80XkntBO10oEKIuLpKQ17SnzvvW4EYSc4t7NHEZ+KsDqg8u/qdgg==","shasum":"e6d59a728a79173a1bd08af32887964fbbf8db8a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-230f04a4a319772a3f945a16f91066c7925454a8.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOURPCRA9TVsSAnZWagAASO0P/i4BjvLllkUaKOIpDNzA\n7HRxvt0NOOwBo0NLOxx1D4tVED97bhZ9oXqFuGYaMQ4JEaJmTFoMNDPmTOYr\ndu/oi/U0t+6KsHwDYL6YraYgvFLHwO8Q6RZVbA6e0/BzTEJwZ9h2ussSas5G\nIEhGZZOCmJutLcsVeNxaJ8Mr3xrSSTuZiV0UtPWpow1d2JJe9cN5z8ePYXoy\nTlI/4soCCxnKNwRLW5YPz3aSdc3ElNGZrrHysLnotxO9E2hOm+lcqKhIJn0Z\nxIYBHwjvMkCRji6t7UEYH3Mud+6/KteLLDA9vz0WFJp2t9DM2U2uocIXQKtQ\n7sAVfmvUdRCvgQcoxD4ONsUioEYyWF0mhPXjg/faAOuC1LMW8Q2mK49RxX7Y\njW7Izc5uFo+uH2gbjE0JHihRB9Snvyfn6rw3Ey2DD+VJzaVYPtE9SAkch8BL\nuaiQhqwBNJFntvKwRBMN4awKxrMn44rqGGqVJFoNALJSgMRTN1NRPDCHR0JM\nkdTjG4uRJjEuUbwy3GBsQdS81OLhExw9teXup1CGT7HttBDyqZ8waetiectc\n/JptAoQ3Br3ulPWHaSWWt3v6N7npK0YXarAMVmkhnO6qEeaIVF2rUyQuWHsi\nYiITZkan7Xs2tSB9y2+zVaknCMVzFES9hdKKyh9CIQqxv0GEH7L0RMBfrlxz\nUk/W\r\n=0faz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmkk1obaCyVb4SdifJohaCwCE93sWvmmlBCy5Nm5PmkAiEAi2rwM5f01eHaj5DUZ+2jzX1V0KBdgdUjOx70UwCQ08g="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-230f04a4a319772a3f945a16f91066c7925454a8_1614365775018_0.3442825635117759"},"_hasShrinkwrap":false},"0.0.0-d2185534b401038205ec168a1602abce024b78e3":{"name":"react-image","version":"0.0.0-d2185534b401038205ec168a1602abce024b78e3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.1","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.0","@babel/plugin-transform-runtime":"7.13.7","@babel/preset-env":"7.13.5","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.7","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.40.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.2","ts-loader":"8.0.17","typescript":"4.2.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d2185534b401038205ec168a1602abce024b78e3","_id":"react-image@0.0.0-d2185534b401038205ec168a1602abce024b78e3","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-4SZmeYG+vbQwYkUtTxs+rLpMmer6wKuDpI7uojRTa/wpwAhXZ8lEQk+zjA6dgvnPcqm3kR1SvogQWmSBOuqlUw==","shasum":"5e73070fe5976c2ae880fdc3ac6aec073f1249e3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d2185534b401038205ec168a1602abce024b78e3.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOrEoCRA9TVsSAnZWagAAufcP+weNdSRWj9I+v2U3cXEB\nx9PjmKUF2kBzowYEm8h4J4JOytOEzZi8+eO3HiW/bRMeiqnha6BXBxstzhvv\nKEMDAs+OYptjpzkJF2QzObWkMnAeRGwBGu5Ogr6U/B3D35DhWNCF8CndTvtk\nong/r5J4pjeV9UN7bKJNrcI+Kklv9nE1ublK9F6Wz2ShhmCfzLeFPjjC4ut9\n1gFs4lX6YNiATvAWjSLvZltqdbBMK/qhJXlHGLKoKgHHNtS4D3LkzFRMS+vn\nRVbBf/abEmi9TVxVm0sZzOtKLYAjhvHnlJPDfmfBtAqPPiOv5L0PkptpTmr1\nSbW/7pUEmrVL/Go9Vy9q+v8Df6hF+V+fmXSXdetvrlt0T6sTtNASdJg0y4oM\nJt2SOYvPxgSxYH27pGkJro+G6xokFfuc/dVbw6+D8nMm88qrwViYL+f7wCSi\ns1YB1LMs/m30KQ2wRV/7WQsoKBSYuCgoil0CY6xvoXmUzdg3YHSFkhnhV3Y7\npkGKi+zZH6MQmc5bsTIiUPdTN5mDTQglJbxfz/hDPRbH2jzQUSZZvom1VmE/\nJEwHElleQSxuwJ69DzXXtPFQFTBOro2iHcsjY1I9SWT0sKj+XCaOTd1W7jK4\ngfIZQggPsCaZMxTId9hWWTnHL9wy6D8sd9ybYbxJwBxXKakJandj0bPEANoC\n9b/y\r\n=LD+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2mMDI9RSQTdJ0wWRsKQsLEelF/sInTxQfzcO9p0Ms6AiEA5zs/HDRqWz58EfQvB7hQGaj87P/jBfmaBm7oE+AwPZw="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d2185534b401038205ec168a1602abce024b78e3_1614459175926_0.3999257105658103"},"_hasShrinkwrap":false},"0.0.0-96dd0eb15d519a89a597d224dccdaee0c17e4257":{"name":"react-image","version":"0.0.0-96dd0eb15d519a89a597d224dccdaee0c17e4257","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.8","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.8","@babel/preset-env":"7.13.8","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.8","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.40.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.2","ts-loader":"8.0.17","typescript":"4.2.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"96dd0eb15d519a89a597d224dccdaee0c17e4257","_id":"react-image@0.0.0-96dd0eb15d519a89a597d224dccdaee0c17e4257","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-OYsUK6mIOEzbgBYjGiiYXgGDHr7Fuc/swBAj/Y/O40h9lYS9tpywcOkS+Y+i4lgHTqF+V4HF3Cz3oJHlCmDFKQ==","shasum":"51dc3b65b794b38b8417d2fc6da3dc751ec60bf0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-96dd0eb15d519a89a597d224dccdaee0c17e4257.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPBn6CRA9TVsSAnZWagAARqYP/jB+sa/m5jXZcotLZaQU\nCHBMtnqvi7QxWcJbsCId+g1ptyPXs5ue9SonTm9EiWfb6TaBbN5xiMYZAQVr\nZ7yjSXKftwJT2FuDyQETkOaMD7/axTZorvdxQrPu/NDGuu4uAzsa3F0tCdOM\n4DENRIvHsQXXgIv1p9mWsfUKyMwvdsXSxZdpNhePj1on65RN25r6ZaoaXVo0\nRd+TGeGfseARwAhoF05U+wN2WB8VUu2tG7tdGsQi4EqAm4zMj2hEIiy1oUKy\nRB7YCBeBMCCFYAgM/7EpxT69HH1F4IT2yI3If2XfqpSWUvioCecG7jqCCQrY\noSG7pjEyg3UvpkVPYCdDYPd0z561yR2a9dds9ycwJbryI42c3docQhn/K2Cc\nsY7ey3JBXEoj08teeGdzzR4IqudlZT/hRsMsHLreehCQsYLdx/2e1mEaNoAB\nDMt6GEpRdA8a8G/QQ0oNE29qE5k6pM19l2jvQA4BPd/8q6nAmN0ZOV+eeJIO\nXONTdjpeiTS6F77/WaASR5jGB2c2GTkic5mQ4LA6/zvKiUNqK8aSpRoqnx4a\nAlVjFBa48Z8kmAieKWzed+5VDl/6Ehki2kqnID/Z/fLfAo1RenFzbgi0Ky9t\n+KoTFdDk/cP/yTi8MMm1CL1dOOY4FyWUV2szdQELDQd3YuanUEiqrqiNTYx2\nmNTy\r\n=neju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCTJv0MbA71Ly5zc1QeBPkJqJU2HhPE0NxBnznXEzdIgIgFt2VJbIFBJcNSu2/hd1Db5kmDMuGFxER0nR6F2mQ8jc="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-96dd0eb15d519a89a597d224dccdaee0c17e4257_1614551546511_0.54318284276197"},"_hasShrinkwrap":false},"0.0.0-e615895f3e4274ed8a21ec22b2c514ea98b15d38":{"name":"react-image","version":"0.0.0-e615895f3e4274ed8a21ec22b2c514ea98b15d38","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.8","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.9","@babel/preset-env":"7.13.9","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.9","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.40.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.2","ts-loader":"8.0.17","typescript":"4.2.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e615895f3e4274ed8a21ec22b2c514ea98b15d38","_id":"react-image@0.0.0-e615895f3e4274ed8a21ec22b2c514ea98b15d38","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-osnDkNfNbsFOuzTuvzELJhKKr5jG2ICGbypzjcVRz4hzWBXnH1sFwuWjAoh5JEwhq4VCIuObykm3Bjs7UsFb1Q==","shasum":"d1eefd16b7cefe158822e38bf94e9b4ef0eeee60","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e615895f3e4274ed8a21ec22b2c514ea98b15d38.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPwTsCRA9TVsSAnZWagAAsRcP/RYBr+q1b/UlZa/OML5m\nKKarffrE6xTFh5sYerCypydGOAkJ/bsoDfNzuYr/yTXRPupr/hvahPHKn8GC\n8N0kfpKkogWNC+mysRHleHSHm0ND2Z6q9WpyfN3UOeCZITo6vgZDrbMEuKOv\n9whtXLdXqWX8WoNUHU5awlbdJaYZla4d2N/Y1iLXNBcV8Ffbjls/jFEecOeh\neLeHTqi2eR9X/1VOrXRLI4cGgVK6UgIQx4O86E0m4yNkOG9b6uFKPJY8W9Hz\nNf/Yp3xYm88CGV/O6V02w0A0cfJOMM20vvaSdvURSY0JHaMleU47Y2mWm9jv\nv58DlCAoyEHK124AuflKim/D9iiI3isQuRKCY2l+T9iiaeziTS7rfVODJWSs\ngttRg+sSDaYf0o1VFUFitYjNZypM4igAIVnh+jrwLKLSlX0HcpnZ3HJr7hzK\nMGSaD6Nh2mHWCTwFXBsq510pG4uqwu73l6+wrWs8Ikp8FS74wS5awCjCpuq5\nmPwbExr0hNPXN4Io+2lXKb2Eu0wVnWZb+GHLG3mLhcT+ZG5gmOwgu6gVVnQe\nC3DhtGPDOB0+16QPIUwKR9D3/IBHFeL/4I+0iUuHSh/jEREi3W3MhLBGK9zV\npMUlBVROp4iCC5ViajSU5jQkuSFSfINOfusWQbTNKhmS5UdvGpZKkcOOJdBe\njO9l\r\n=AhCC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2iYsmo3J+vr9mzbUBpae/JbihOUOrPUDGhh0YGepeXAiEA/f8jLIGXwonBTfuI8eI82EEDffPu13nejtxaa1uFOTA="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e615895f3e4274ed8a21ec22b2c514ea98b15d38_1614742763877_0.8626989639689067"},"_hasShrinkwrap":false},"0.0.0-9cb5080d71294c68deec2992d71fc5d9a575ef6d":{"name":"react-image","version":"0.0.0-9cb5080d71294c68deec2992d71fc5d9a575ef6d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.8","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.9","@babel/preset-env":"7.13.9","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.9","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.40.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.17","typescript":"4.2.2","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9cb5080d71294c68deec2992d71fc5d9a575ef6d","_id":"react-image@0.0.0-9cb5080d71294c68deec2992d71fc5d9a575ef6d","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JbTN6RyFRAgyQ1diwllqrVQMpvWVYXZ2vow5821m/yjdpN0wS6SEKYNCcM70uQ5z/+ksKFODgXsmGbQUie2c+Q==","shasum":"2785ebce05b83469ec100808f8f4f15f9cf8f74c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9cb5080d71294c68deec2992d71fc5d9a575ef6d.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQgpICRA9TVsSAnZWagAAd7EQAIIemwS5VI6gN1HRxa8C\n71N9Bu6dnk6ZZeS6ahOfUDCyFe8QO2TA5LuvJtd8yyqXLy8SuR66bZpy6SEZ\ncwdii3F6Kdu75zahSE4ruGYKV1lX3oAAL/CHsvMWDdQHMGSppI/hqXbXsKeN\nA2eFzn9OEF63DcJQmrGSbG5xQvOH7zxh8ObvXM9fMM1rfNSwGtYRQ4Ma60PR\nS3Bx8Bp2q2odPFZRikafBnqocVz8IVm3g2rUxwn/WItndklraGO8uKtZCuIG\nipdkab+mtzyS0t4K9jrf59LIGWXSgMtSMZ5wSJug9lFgCun7bGIn7YMaZBtP\nOmrownXeAP36LaWmn1PErTfgybgTLbObXwtIfehFByMvfYauHzF+UJyeH4uI\n61b8N+saqRd7ogIYCB2OWXwJ7p9IBRChg/q8GopaHpDE6ubyW2NzKbDbKvFm\nnuLLOQHj/z6kr+CSTlKn7Duy/5Yb/2MyeQRTFbM1RiIz2lhPX/0SV+x4HYzB\nSGU4zczxDlyHfQdkmbr8n+g9mAIn3LlpIYLmQZjcmxxdcXLFk7uFfnW+gZF+\nY7e30OvzKPDlEUGF8X57Kr4rjVVKx+LKa3ZwzdHcfeZexhxX7lmcu3UPQJUX\nY1pTeTDjYRrTkFkgJHmAND/F0kxuG0SdJETDIxZpi3Mr6r7pcyDUwhGeBXWP\nZdWr\r\n=yH2C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDneRI829WyLDAgbyLe/18dDg3MHOZm39mYrx9vTKegTAiEA4C+TypqWZHPfyeiVhe2Br6Oa3USQrI6xn7kyaV8+sNU="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9cb5080d71294c68deec2992d71fc5d9a575ef6d_1614940743480_0.8655287001120813"},"_hasShrinkwrap":false},"0.0.0-7fb44d76979b3d1e9c69038b94d0008eec6313aa":{"name":"react-image","version":"0.0.0-7fb44d76979b3d1e9c69038b94d0008eec6313aa","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.8","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.9","@babel/preset-env":"7.13.9","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.9","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.2","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.40.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.17","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7fb44d76979b3d1e9c69038b94d0008eec6313aa","_id":"react-image@0.0.0-7fb44d76979b3d1e9c69038b94d0008eec6313aa","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-GT+7W0Rr/b1orpG7zFRinn5+YnNVFbjZMZBwqlKDe4kLGRiAMsw1BxUvDMt7sjup9oMBh/soQnRbAzImG+L3NQ==","shasum":"d36fed9bab928c388e499052640a58ef70b1b091","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7fb44d76979b3d1e9c69038b94d0008eec6313aa.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQ5D8CRA9TVsSAnZWagAA5WoP/ijuESdSIuvpwI3tRVx2\nFBroQnMOYlmjVa8VpRAD8pbP9rsyCE64sto8qPpczN2Ve6+cJb6DOXQEl5TG\ncpfbCr+HoQC/LXBIVjT3cDfF0uj8E02KQJ+eK/m0ZmokH6079JQVzPIc+fOo\nJCow51zUGBtfj/e7snFyGsZRHNX75+j8vZEXB/0larU3K/M9X4A7W8ftFJYJ\ngkfU0D0l+dKadeQA9K/BnVjOKF+iYKxM/LY0CQeJO6UYf/oeyVIlPiW3lG7T\nNYIC8nmDqPU1SpgfdAitKm6bVqgannqXSU7kX3TDs/AeG7dhBaIUg5Sdep2e\n7Ce2TkuVCycwogk6gBAzf2DGP/UsHPF5Yz9GQbM8pwWb4LXhmhPDjxMjVFSe\niFHrbdGfmch6w9Y5wHSUZKwlZz/6FJuEK6t8yvb8T0Ydz0nOY/bzDP6ocMzM\nU97aakznfV/yja+WXpxQnZJg6ysKqxFmN/UnaM6Q38qO0L7Af6E4v7Yn5apc\ndR5sZoZvm0AVikqlAZMMaVkwRKkSB7CTBlb8qqMtoXI0FBDYICIU0AO7NvSx\nlZ5ORx//qfTUL5PJX711FAxsIvYaQGvyZ+LvfHErnofxE7l4t9HwCLNUS6gn\nObYflPdgJlUMmfj0iNkdV+YgJupT7/ktawSAweNclAKM8q6pjfrZUqzkrrqO\nSR8T\r\n=O51k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDotWQjj+3OEATJ2aW3GPjze6p3jgyzAs5PVQ1njhF8NAIgUQ8LSWztlsUGGhBX8o+n6ISgrnZWXPMjuAbQis4bIrg="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7fb44d76979b3d1e9c69038b94d0008eec6313aa_1615040764144_0.7381137809848983"},"_hasShrinkwrap":false},"0.0.0-2d5037612dcaae0bf475bc2c976be5ddf9c1ca9f":{"name":"react-image","version":"0.0.0-2d5037612dcaae0bf475bc2c976be5ddf9c1ca9f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.8","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.9","@babel/preset-env":"7.13.9","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.9","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.3","@types/react-dom":"17.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.40.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.17","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2d5037612dcaae0bf475bc2c976be5ddf9c1ca9f","_id":"react-image@0.0.0-2d5037612dcaae0bf475bc2c976be5ddf9c1ca9f","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-oE8Prb/toOG0NFVLQmvf46V55wJWXM+GZS4/6crni8kzg0tmmlzoxdF29F9uSoQurWruqQWTzJfJ9WUVlm1T5w==","shasum":"99cc40c58d4e96ce92196902667cbcb7305c2147","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2d5037612dcaae0bf475bc2c976be5ddf9c1ca9f.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRkqRCRA9TVsSAnZWagAABewP/0C67fGTyFmiRp+czZVf\nuOOmgktxRf2ddDzoRpvfX5q3YRgzqTZFEH9geEEkIXZRbxSMrce3mVDm7jCi\n4K6iuDU9Lvrm7EhB2weyPwlazWL5/WhegdyStTy7Dba/zQXx+LCSPQCZvMbH\nqEoUaYM1VaEPDbhWjePULuiYtAoQ9XwpnXF3NRmre5kaeQxdLWiZnNmJnkWP\nOcWeQA/IXNvVOHE/QH1hZ//P4SKDRUnVnmeHpp2DySWemvY6Tm73XWq2OwR1\nAGdnE0jJKqMIDF0unBKt3PJ6nqN/W6S199/FRu7LoHpZD6Q8wmpLivO6001l\ng/9E0hpISU8ugen1pdloz+WDkPKGNED2XnA5LYJEzoC3AIvwlqE1QrOfCJKH\nipjWQ0TGNQ/OlRjiDPYSVuDLrictp5tgF/NmISGQbjlqn0mI0FxmBHd0WVEQ\nad+Qgzv368dp3FjT3d7wZ1KBSvKVqSU2gG9kK0HWDbJ6u0VSTnTqiXGGzmSA\nFLF41zIwP4uS4o1QCugKjuk6BXTvpEoA4bARfY8I7XSnyRby1lWVO4uCqfJ/\nZdn+D4tFzT8qBg5D5LZCC81ZfBHBh2FGfy0tN4pWnnbbBCdqRHMOSvf4Fvu6\ni13y53xOQmQu46crNOsNHFL3LnW6FvcbY57tpf0yHco8XrnumswtsfeykfHj\nF816\r\n=CLv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvhFZmYp8UQ3ZBbiYKcwTVFOaPH5Erwt/sfEvWXI24QAiA4B4svdF+/C+eBnbCOX1BduEAIguFimiHmepVXunCjEw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2d5037612dcaae0bf475bc2c976be5ddf9c1ca9f_1615219344950_0.4444858097311444"},"_hasShrinkwrap":false},"0.0.0-efba7bbf7a9440f63e5b7a2054d92ca44361721f":{"name":"react-image","version":"0.0.0-efba7bbf7a9440f63e5b7a2054d92ca44361721f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.0","@babel/core":"7.13.8","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.9","@babel/preset-env":"7.13.9","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.9","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.40.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.17","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"efba7bbf7a9440f63e5b7a2054d92ca44361721f","_id":"react-image@0.0.0-efba7bbf7a9440f63e5b7a2054d92ca44361721f","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-uDloOc+bHd3U4nTUz5AyBeeHRIdd0GCZNKAXjFITtWRkg80FzoYH1yFLmFnhTGV420f4ydlJ5NAO6W5kpHuagA==","shasum":"81035d161008391cefeb11093d3758c486785334","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-efba7bbf7a9440f63e5b7a2054d92ca44361721f.tgz","fileCount":20,"unpackedSize":38165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSAY1CRA9TVsSAnZWagAA1bAP/i8rqGDZGMHK32RVGV7q\nOTIcKSUte6VRHiiw8RmYBh+OsMXd9tgUayboJcOjrGxS6GgU8QPi3oYfk7+M\nY8CBclotk5vQ8VpC5Em70Qp5kGSdecp1XH9W/Sp+ua1+/skosIk8yBkfN7Ss\n5mZryl6SvbsosBDUBdVwXF0Bglp22RDB2KgghA+eyq2s48unvNsiiJB/91+W\nW+fZA5vD3w78EyOVv1HOLgQOhBTcHSnLUTTW8A2vaQzdZMC/iQBiwJH/CDh0\nWll/aUOPfH+pqr0ad4UPZ1MbZTbnqdvPqOUgleczO1ySY4On9lH/mqVU5oW6\nUZ3RQ4t7vkeoIdjcA5BY4rWuKKEvmW0qQH4vV5FcO3giKXfBGZysOWkaccvs\ngxbxCT7mSHISiFLIKBrNLJLbF22z9i9ox/v4dbBGpif6NKWZMCDePQrdm7Q7\nbKmGD7BenksSOVVrxtgjwd8JGPBSqogs/btXL6I/R5dgya2qElI9aAryaANH\nbj8cwRsalicGKcSdz8XMW527IMwEo3Q+Hv5tKk6nD40IoWwGDFJiblb4BxqT\n0s46HtL21NS9VHGyA35I/hoT8fKpp7tQoSx4SaRRpWmTSbBNZUuT8IUtss8z\n0N/TJnkguk1ccLGR79hQT932vlda/gtQbARUfQmBrKGYK+tpOsuxAcHvH8pM\nMIuE\r\n=YOfx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8M9pDNhmQmrmgNxRs1ynpyoIgvl938SS0GaYXrVkx8gIhANKpt6xUR/1pmVb66CjbqSyNJ8p3c4r9Unk2vUo6h1si"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-efba7bbf7a9440f63e5b7a2054d92ca44361721f_1615332916290_0.911463804535005"},"_hasShrinkwrap":false},"0.0.0-42c00301ddc8ffab3be68b522f562b0720a4cf01":{"name":"react-image","version":"0.0.0-42c00301ddc8ffab3be68b522f562b0720a4cf01","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.40.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.17","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"42c00301ddc8ffab3be68b522f562b0720a4cf01","_id":"react-image@0.0.0-42c00301ddc8ffab3be68b522f562b0720a4cf01","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-yG2/dP/HIe8Hp/K5VmeuN/2ssgkSA2k68KR27bDI0vAAXMVt6x7Ssrf/+Yr3tePxDnEESg2940pYkFGRU8GI9w==","shasum":"faf4ba29b3b2ce60e3093e35acdc02a96a09bd10","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-42c00301ddc8ffab3be68b522f562b0720a4cf01.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSCQ8CRA9TVsSAnZWagAAGskP/iAeJWR3FLK/YW9Fgnh7\n5fHPDLJLjirvkB6LxlLdr2ru2dbEvfmiwodYXcIfP3VZRpFIHeXslJ9B1MA0\n3iw6DTAaZwi3T/Iyt8n1Uve4eaXHcVZKobjAviGW+SD4YTtFBm4+TBGLncDf\nxt3dpzFoPd/PyVG+Q/uUsevLwiu/q/qeeFFFbWPGNX8SnKHNwhRtiDNjSkiU\nf7KGG+2kavvPiCvY0HYWzz6Gbg6OJXcGtvynvf4/CY9NDv+QggQ2KPIYqQvZ\nvgToRy89o6kR845tpuQaoSWcH3dvxCwR9eQx8OOXA+0gUfebSdOBcgnHlLzn\ni/B57k3m+K+NJvdhxxwe2Xc1R0rbC/u+mGXmFEsqWKtALc/5peOkG7+st+FE\n9ccL8IK2Wfp4O1ZhWU+kbAiLfjHLszAYUkWJDGBM7tmHvBy5+R4N6EBLm1XE\nHlDzeMFLVEWSlS67DZZW7Gfo7SlxxKs4Opox0jnn6f2qw+DPHOaj2Dh1anCZ\nyQrB1uJec/3Po43l/fDNR+v2Y5WcUOUlAszC4VoG3hrdT0Zl2oU7mCk2HcpD\nuRXxe/5lQc2T7EjuGL7T6Tp+LJxTTEQS73mAUTTCC7q4mzzSbwp6ysoOJK/M\nDxt45r7XeLFqnb1UlDndJAUuASQkZ0jYI4CejJqzqpmZYy3g9YdKpwOTQJ7c\nfu9r\r\n=M4go\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjFw6wR4J5W70b2eOgOTqX2Oqw1Jnj+jzE5vnugOG3ywIgXiubU8Cx2zrxK8aWdOQKqSR+HE9pudWoRssKoeATnFA="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-42c00301ddc8ffab3be68b522f562b0720a4cf01_1615340604414_0.6166156179182851"},"_hasShrinkwrap":false},"0.0.0-85790db8a36cb591e41045d5a51379100b2ba511":{"name":"react-image","version":"0.0.0-85790db8a36cb591e41045d5a51379100b2ba511","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.41.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.17","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"85790db8a36cb591e41045d5a51379100b2ba511","_id":"react-image@0.0.0-85790db8a36cb591e41045d5a51379100b2ba511","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-gFo7zwyU38Mpj9nL/LRi7/ovnHYH49wa4bHVXlZ+lyd71y4fAIDUXXz1xwWAfjV+QTo2yEY4SwPHHNbWcdbKEQ==","shasum":"8a30ad268dd20476bfc55419cdc173dbfbc4ae69","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-85790db8a36cb591e41045d5a51379100b2ba511.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSZasCRA9TVsSAnZWagAABa0QAKRoq9/ddIf68Ul0SndL\n4iNREYws4yfR+hrvvqFXeiIeF0ps0lo/rDGv6xQ0trBxQNgXBrbn7yPLbPYZ\nPEQ/lGjnCwinJqZ3vEAGbmhdS7bFrSsFFSANyGwhY2wxoB2EHHdk5QKY8LzG\n5BoK12werJBrtPifUM6z6MCf40itMS89vKyavKSnsCEHIGWnh7rX7LOUixpA\n2SlafB6qQqfg6cMS1foM4K+X0mT89JKpscox8HlwELYQQYpMlrfpEYYDzGad\nj2kAQrX5tXkeMhAbYKO9euRxLmuTga1xsNOvuLrVwosrWDtxgxG+zuCfIxTf\nbjN5GUImOgglCJWerSQqUHBgdTYpmc8aEZwhTGyrw6uAWRd/Uyhe0x4dDaOw\nWBcolScjAE2RZm/OYnBi3kH0EOfWMiLD08ORbS2Svx8YhLlFQSxZjGPqFoNZ\nyI2iIzuYSOTqFg8LKlL5A3uqd+4UGG9FaEsveC/5vwn/QGYcJY/FCtyyfsoV\naLzdDSV/tilgLrdzg/VBHew29rYhw9+9VX7Q5kxkVCIRzejedA5ZVA6sNpy2\nNx6Y8NzQSuwTbWr+E+7yOJ6r5kvIcLEUJvX2Re8j5lgIkrq2xcf6KVrd/B5H\n74V3Y9fpOBB6nyY0qV7qF3wkIH8FFM42ndRA/tox6sIk+xsV1Sx0hNKhZ0Ul\nC98C\r\n=wUJj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSahBTi/YIFhh1QHB9/zOVmU3yvQCkQAgqZnMz7k965QIgb828O3qGTVicKPdhD+HPh8mLuoZztUn6bE6HvUrvqb8="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-85790db8a36cb591e41045d5a51379100b2ba511_1615435436450_0.7327924756233499"},"_hasShrinkwrap":false},"0.0.0-154094a3d820f23730466f8834fc8289cdcc6d1d":{"name":"react-image","version":"0.0.0-154094a3d820f23730466f8834fc8289cdcc6d1d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.41.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"154094a3d820f23730466f8834fc8289cdcc6d1d","_id":"react-image@0.0.0-154094a3d820f23730466f8834fc8289cdcc6d1d","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-7vnWJfziCO5jO+1GCEQ9Whlm/0aDrh2WivAZaheYUJaLBwdth8SAhMCOPxhCjzdkIc5mqpaWmPoXK5mtTisp8w==","shasum":"9603088c69129310ab3a467d9884dffcae473113","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-154094a3d820f23730466f8834fc8289cdcc6d1d.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS52dCRA9TVsSAnZWagAA28kP/1f7pX0o64LccdhMKFel\niOZA8KeDixPv53mJTFPjPc8m1uiLMEafFl/5/r1jfKC0v3r1zxFom6M8EUc7\nS80+o5bbm82BvsXd7ZSLwE0xJdou0V38gtDE++JIwRX4hVXCNHx2uKWUoHsG\n816X1TJYVPjPbCA25SN1dyT26HqG60E3zrT2bNLqm1uCALgbCGMOS/1hPz9Z\nJWEtn6DhfLE/6/rfh1ThkvlnwI5kyCNCkrPylyCgzZaa21RSNQZP+lqTBuOc\nyYevpIInbTWJBWNcuQmcwLoSErbgli8ZJaw2spKpNCQXaWDy/xaJ77gymU9v\n+YmDnoq6ey0ZlCNI/fsHXYqvezxoA0XaJY0AkwpOaju8o24Z7v6gaiyizB9b\nMJCKZKlSvewAVc2cmLh4HWXDEdhKDbdvw9tNNIsqf8VaOUPkKgeWTY0PhPXC\nv4MEFQ/7b20WfqSl9C7QU5xdPhfDDxlL0xw/9Hrcv7NtV1VR9lnYgrBAuYk9\nsJdCNHzvQz54cHOysGGtSm17H/MB1IvcUjM+7VMlL+/0gEINGZE0M/c9kfM1\nRQfUOyB0L/cj+7r2Vh+zSfOibHW6lTWVyvqeZCPv9sBl3q57/aJEaeMaLeYV\nE4h0TPr6M2DmS1fsydXHOCktyBs3ubZjjFsbJpiBufsJ4mGDABmxdDot9tnM\nOgO4\r\n=Cap+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYf1Wlo+mRbxDlkI1iHsqf3FBEh762ru+TT9opLvIthwIgRmAMl8uO1hKxWyBIUX6wgX3LyMrWNgHwRUppNoxgi8Q="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-154094a3d820f23730466f8834fc8289cdcc6d1d_1615568284465_0.7041927393167415"},"_hasShrinkwrap":false},"0.0.0-91045ac354422a559b41a723b4532c284766d126":{"name":"react-image","version":"0.0.0-91045ac354422a559b41a723b4532c284766d126","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.41.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"91045ac354422a559b41a723b4532c284766d126","_id":"react-image@0.0.0-91045ac354422a559b41a723b4532c284766d126","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-R6hCSHhgAqNA1mAIeubjks2qqjx/vkZCdMeDkN5FGYThRhTiA69j8+f8/fdMYTbrMaq5E0ybytLYGmQvHTmvCg==","shasum":"4a41c3520a6c019e72d432c57ce6f6713c5dfed4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-91045ac354422a559b41a723b4532c284766d126.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS7+MCRA9TVsSAnZWagAALAAQAJCK+iL2D86Qo+NH5aQc\nIl2xNgdHMDKf+78j/tRpk4ouWKNgAO6KL1pEZGZxSOQ3iROOfO8FbFdH29p6\nY2CAtPGXAg5ezFP4Yh330o7ypIwyoj1witX87EDyE9wy52Hz3EKGlwIHMDcp\nXV1lrLe/QAfCn/AmUVDiP9ORsjuB1RsZHtLjoTQoZLs1fGlbEPpZZqs5Cf9y\nQyTZ9Dm5Yj6mJDT/4fJNoLZFCpWGeuCsR79uf31rAR9w3gKXFKvgCwZ1QWP9\nyCkdr7GTarZF/5R0WrsXAL+ms/Vi3g1+32yLr8aK6QUKNksDKJd9uD+DLALp\nthmnXK4qXbq99X8EfVVzNROBrYpRf/ZAok+2GyPcjFKFIXikoWQywUqcD0qq\nIndDR+SPEW11bZnfNHjLoa0WRBpX8LPJYR1hn/r5cZN/+6apclQ1sJWl1Sb8\nn/BH6O0tuccDZKBW0G49p5LMRgk5zYQhK/XV7xAZs9P79/YQJDhGvavthhAH\n1EHHeqA/HRsIv1sTko1Dh6r2TOqPQ/+8Al2k6zaQpivId85tIflbiUo9IrYz\nN7QGOXKvXsFhobM1VCGJfc/WUseA/lK3n4+5J+XKlf/LE0RYui4asnlubxiA\nxbo7FBuXKmFar5OffJ2iFGAc6umi3l5t33y1Y7r57WOjtj68T+IgX+/R4p7J\nN462\r\n=ZCII\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqeIwvRENKlSumopGJSR+H3yDUXvPjMxYMiV78AuVtJwIgDdF6/rxT4Q4b7Lk+2Hdi50KY2vZ2MPbWRlNAo+B6YaA="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-91045ac354422a559b41a723b4532c284766d126_1615576971655_0.42309267767514935"},"_hasShrinkwrap":false},"0.0.0-fd84c4fba9699fc65cd88cdf94424befea8c422d":{"name":"react-image","version":"0.0.0-fd84c4fba9699fc65cd88cdf94424befea8c422d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.20","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.41.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fd84c4fba9699fc65cd88cdf94424befea8c422d","_id":"react-image@0.0.0-fd84c4fba9699fc65cd88cdf94424befea8c422d","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-DpoSfjC04JEhRfXFCUymRggxdDxeHOQ/ElbLXgFQqCcSxSYs4onUhW9Z8DyYI0kWEDfYcEla25bNoBl1pXJgmA==","shasum":"db0c0cbdd9f344f757d5c2a3838943c34f85da2d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fd84c4fba9699fc65cd88cdf94424befea8c422d.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUlN5CRA9TVsSAnZWagAAIIIP/AikOgYc+anNJJozIRBM\nRN5Z7jtvDaq0cNEnyRGi5FOr+viHNFwn8IsOK9Cr6mIpFvpqksYFBLFYJM6G\nGx1xWI7/51HZaAuR+KRRi9MihB8DqcMhrOs9JQKZftUrqohWhpUgMQeiu67x\nDPyCqZpm2xbUCzsRwf5exK7eEAzhXje3r1I2EbpbNZimpRzV35u6ER2kSSaA\nyKeI9gV9HpBNN4AymX2nQRNMkmOhRXqoBUKmQySpHb82SWBFoLlQTZzLysse\naijEFLWxcjVAmNUhgx3pVbAWSmI+UJM79Jq//rhUQorMsroNp90fq2VeTMqS\nWAcXz1g/achF9nhqRLCWg+AVgof+aVGDN64PHL8EYMacUmmjZtdp2IJ579Bw\nGlVZPpseBvHeGCO4b9VGDBxiUioPdOGCjvCj2ARFNr6zTU8Dl9Y10+FtLMHb\n1VY7ubcB2xgX3epKVFwn85XRRwdXXprkbFZJadGVPWQUpu094kXRBP1KjSkD\nRoe2Gn/YpspISsvgcb5IrHmgbph9ikFjh6pYyHk7eDlags5yYwa4N+RokwOm\nUSb7I4GImDRls/v1IA2WvICkPxA/TnZpPcPbh1DOhDfNcHJiy2qMeBn4WPDY\n+fyVn+qivUK5zpy/P9jwP796lau3C243kBsf02TSWibjzizbcSEg4Y5H70ni\nRt1u\r\n=/JTc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDux5Hgh8vnw7UItpFTJqDRqqjq4oQXEd3rcosnnymcpgIgSLYMIgDzWlbfMr280XylFgwcL81T9AfZP2SaiKYfxwY="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fd84c4fba9699fc65cd88cdf94424befea8c422d_1616008057383_0.848993473986331"},"_hasShrinkwrap":false},"0.0.0-1def8955578146d6f3bad4dbd676def6e992ea9e":{"name":"react-image","version":"0.0.0-1def8955578146d6f3bad4dbd676def6e992ea9e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.21","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.41.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.3","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1def8955578146d6f3bad4dbd676def6e992ea9e","_id":"react-image@0.0.0-1def8955578146d6f3bad4dbd676def6e992ea9e","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JiK6u52lfrNGF67jQnk+fG+V5uDxzvolJlk3c9xj9nh3Rz06PjQ5Z82gtOwa4X/rT6qGXDRcXfYDGodyhsv3uw==","shasum":"e83451cd660a1aeb4c77f5566669c777fe28d7c1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1def8955578146d6f3bad4dbd676def6e992ea9e.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9EPCRA9TVsSAnZWagAAhowQAJRmKmQXY6NeL8paGtNi\nu8swasPHpRCT2/lyzzyzY8MMFx4iRxO25RVt1NbreIS1pOwUo2Yn/dBB3DH6\nyWKvuWeSTZJylSR9z2dPGMGRQ7UhOty78G1nCOQkMKSux6Kmusp09npaCJzv\n+MJlps38KbTf9/flnRkfTuubjT8X2e/tZCdBYVu5zuNWEc9J2sQXg3xm4/OC\nn08BkuSRX2mShHjmSdjQFjnsfj+S4v+RbbEn6YtpsPX1JpASHMMdRWb1cYpk\nEwlRgrQjqKbp1v82osI6qhboTqew4bFI1kDcIsUYbuYJ0K3jaWoDRHfjkLVM\nnTtso0++vt3Pfdj5rGQWH4/zpNFQe3EGfGkAxaWvLzHqHUspGmXnUYTT6LWV\nhe3FqHaKPLDqY/lkCG5k8GOzI+ug6pFpkGavi/IoGsqTGwGkQ83rVemplWO7\npl7ttpV+kBhK8VKX2bfb5lMXH3j8TzrVzcxc3MVrOrlAOUPCS8PdIegmZEk/\nUsxGDCd6J36sgubTfChTpnnjeqBp6YTnv9RCTECiWVMxsTkUN6PhKxKSLolN\ncYH641rcFBR+IHPB3SZaf3mwE2N9Y72D4izAqeHxA5SVn0LBRSg0DhiLE+r5\nFWY2xtBi4alcCnLVzXtZ87J0skou+p89nFWXRf5Ecsf2/FSPwdj7qYU71L4b\nMGO7\r\n=8B32\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtd9BgDkm3/6p5Y5YZKi9jqYUiYpcwVfztLiVhn0jbpgIhAKGgljNgc2epk5WfIXDsi/ac+fUtOCsWPiVy7pMtZjSE"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1def8955578146d6f3bad4dbd676def6e992ea9e_1616105742557_0.6929531409277825"},"_hasShrinkwrap":false},"0.0.0-107373b14df139b77500c90b8c5010098ba4fe60":{"name":"react-image","version":"0.0.0-107373b14df139b77500c90b8c5010098ba4fe60","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.21","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.41.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"107373b14df139b77500c90b8c5010098ba4fe60","_id":"react-image@0.0.0-107373b14df139b77500c90b8c5010098ba4fe60","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-10SuIUiAE86Jxs1Kh3adRKqnFDA7PVXLAd4PEsJfxnwgTKRjvhXIgWJh6ErzenJEqq9u/QGpxaG3Hit0tjFHyg==","shasum":"1b4af3e72b5f4bb69c0573636b077efeb8cd81b4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-107373b14df139b77500c90b8c5010098ba4fe60.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+2gCRA9TVsSAnZWagAAo0UP/A4/BTQ8Kk4yl4JWqMkn\njghWDMzTHmLjm4c1QuDKOobuHkDCkz6u2YqHhwAJEQ7bNtlcD+BDKkD2yWsZ\nLWUhUsEjAkoCuHRP8PgxMbFJlE9ht8jd1RoU735XAvlu5mZaE/1JYm4XeHLx\nAJgpMq8LaPFoP8Pv8uji1vhOrIFi+MS4hiwXuiUVXocUT1qhxM4A02H2Zg18\ncY5E+beQ4SbxYFqnf6FMO2Q2pndqtN/eyrQb9mlQCt4uxT33/91CC3mABlYH\nyc1Xl/ZhpixdJXp5JJXNTO48qTpNwNeqjZMHiU3A1EmFh7yjiYV8OYzfBPDa\nNExOOmTpxPO8S2NdbszMMt6hfv87lADdRkhzIgCTY62HgS4h2/wfj4NTUUlG\nCnEmSyj4r9emXIQ43le6AyqA1cJbr1qTCGLgZYutwEb0T0+WN74WX1oE7OAk\nMFw11uNou+iX+7ylR6DX+txUCJtIKoDXkf+3T5UzqspuzbC9DtsS4TW+dtWA\nahxIiAwEoLPotmwkQ5be0Owwg9L48/ZsNMR/QMZ447kq2iX6WITQ3RvLKKj6\nk5sPqbzp07H8yqLaUffdtsHbIbBNxHswuj6ICVqMIFDuQXLTO+LsnLuXiqul\nK3+amR5wiqIjxjb8h7ol+0k/8KRYyx4EMw6GmZ4EDyDdTPDMCKMmYZbtClfA\npz6V\r\n=L14E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqS7EHSXJe9UJCYyQSZW9iMGs1hW/0ci4ihnKe/iB0OAIgQKKQbF9rsmrEMrpnfd9nO3ocXrRECmQL42ELNqjvfpg="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-107373b14df139b77500c90b8c5010098ba4fe60_1616113054969_0.22611019004776423"},"_hasShrinkwrap":false},"0.0.0-0dc9428f111f69185a155c31bb6056dfb9578209":{"name":"react-image","version":"0.0.0-0dc9428f111f69185a155c31bb6056dfb9578209","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.21","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.1.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0dc9428f111f69185a155c31bb6056dfb9578209","_id":"react-image@0.0.0-0dc9428f111f69185a155c31bb6056dfb9578209","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-+yQ3PCSW8KhPDzqEJyir41svYrdI7hR3ktOu2YJRDMH45A7/fQFq/jYgZDeZw6ygSi4r/qDHmxxe0MU4CkI1Mg==","shasum":"7721f66b77bfe098208a167bed01b31ab8d4b667","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0dc9428f111f69185a155c31bb6056dfb9578209.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgV0p9CRA9TVsSAnZWagAAq2kP/1Nqzaw+2/6bi3NMuwZ6\nExvx+eOjUxDyTFJyNxuXrAWdSwtiLBI7bXz+gajRk1rtn9OXCQe/P0Kw4eVC\nHuSFJuTo4sMCFo/pLb5DH4FtsbR454TtEWixMmNFluNQ+IhDnrllasWxR8rM\ncQENPLXecZU3q28y4ryjlZ6zJ4i71mTJ50LLVBFAunjMZqTx0RhdkPB2FyiC\nQOJlRm+1xMzxLXPbpHY2F7pQWViwTKElRXL9kvEi+7UPj8woiuZrBxwbUhuh\n+PuZP6PDovnkXrBwH8v8Vc5N25rlNDpCTb7Pjh2Aa7U8tyOY/an8+V9r/cBJ\nhPW5awgjAlTetFkuSCfTAn08oVVQU381b3IwUKzbHLhsn9DkA9LfxqELUA7z\n4/sLSWgdAE4Y2goDRfCPsXJKu6FqwXjY5sDAHzZaCT4cSFWyS4Fauz9Ia2+6\nhRsmYjipyD5wwtxFFKUbXGxvmzkF+D4pKeIIZ2C3a9tRgCxmjzUh0/XcHG+0\nh50k+6n+21Rb8i4sTZnJ4ibZAGOiSdq6baIcGat1FB48fJv4KVeO871WcCOz\n9ksmHqv2szyZkDB11K0zXnoDbxCVSOFqpo7XYZbFkhxjyfnXUPl6FKy2lmKz\npVfuipDlFjjegeeNwoptgyE4wPxiREKcwkpDUJ6tUxGw8ROBYGqZTLuZdVvO\njprN\r\n=+cnW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0zwZi+FmOzpBiKg884LnaFxOZv5/wVUU7FobsIjVXaAIhALsWmXNckqkePNIo6yUqzIzNKvt5jcKGO0F98+h5u/lj"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0dc9428f111f69185a155c31bb6056dfb9578209_1616333436943_0.6651241387790394"},"_hasShrinkwrap":false},"0.0.0-6556c241578c608f7f9a7a8bb1065cd0bfae5616":{"name":"react-image","version":"0.0.0-6556c241578c608f7f9a7a8bb1065cd0bfae5616","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.10","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.21","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6556c241578c608f7f9a7a8bb1065cd0bfae5616","_id":"react-image@0.0.0-6556c241578c608f7f9a7a8bb1065cd0bfae5616","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-n+nKU3U8CYmWY2y3fzcHiSkdpgBqJzn3oQ4dymlN1JuaU7fQ3SmYH4hkxxf+OaLYEn6xS8obdi6QWpKHJZMi3g==","shasum":"c429d43c3be7ade8287bfce525bb877ffc752996","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6556c241578c608f7f9a7a8bb1065cd0bfae5616.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWVTSCRA9TVsSAnZWagAACysP/jWVPPaqzdNqdkVq+KPU\nRNbKIPOIDbd9KKggy8V/MyzKNxRXEsNbCHpMhuJfDo9iGPy0PrHm+EhOu74r\nfmH+JoJyVN9X2WOLqG+WbmzdS98YVINF5/EWDoP6XR2SdIpKiIVYnQ/+QUG7\nQO8J6yCAeo9wtLpTW/h1sUgQ5agN17xoIWVoo89McWpc/2TgVIsjSQiIpwwC\nd8ylns8BjeOG/eqNozeARTkon7PpQtlCW9ZppXzlPgbmZp2/ytG4rojx336t\ns2kHv9nwqzOvw2zeq7mHgu2wiFiZxrGqSTmD1Jk9bJhvwNaiHvXB2PWbVs6a\nbe7DtBwceoJw5sAFwOguoYc7Y/bvl2rcDxQpfGATf/GrYsiaKgNrlmAzZdWm\n9YU6tke7uDj4QeChbh2HBT7h/oC99ZS9ONFMcdiykODc7/OGt3axRSqizLu2\nOoNsu2fUSfwlhCzerq4b6OaPPTsc7BRIaEII1kjV4o2m7MYEEjgB3XnTxey6\nuSFOcqUAwvTECBgaIAf++tqRlyU/k+1+kpDKTh8gstcbAX7jjwiiX5N2TMJ4\nTO0O9uwqJR+RqfYCLJU7XJOF+cWBojrRdBu761cZhecmcs1hes5qzKTJTact\nKjTWq/RukpQSpsDeQOzuSw2BIFLp005bHfPoVHK+KOZXaOXw2JvSEjr2q/pk\n2j2l\r\n=SRrC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChU+mD43DQ1MGJOZ2UgUTvAWOuIm20eq6YbYZtH0xE/wIgd3DWbZGDaJBzZzW3S0vtR7O7IrMqU0L3C934kdvZE8A="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6556c241578c608f7f9a7a8bb1065cd0bfae5616_1616467153644_0.0110284204021458"},"_hasShrinkwrap":false},"0.0.0-2b690d6807e5fb93a4946bb6ab272a504baf8bf1":{"name":"react-image","version":"0.0.0-2b690d6807e5fb93a4946bb6ab272a504baf8bf1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.21","@types/react":"17.0.3","@types/react-dom":"17.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2b690d6807e5fb93a4946bb6ab272a504baf8bf1","_id":"react-image@0.0.0-2b690d6807e5fb93a4946bb6ab272a504baf8bf1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-1dWC7j2p1WvWPpe9Gj3MmBwFJZCEjZsl3mBjyMldCCapL+wcj0St+cdAmjAbZUtMI85a7bNmd0FwtTaQm6t1Jg==","shasum":"0062fd500b75a0f172c450d71a9374fead35af67","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2b690d6807e5fb93a4946bb6ab272a504baf8bf1.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWtAACRA9TVsSAnZWagAA9WIP/3qlZpSNUBb1BZaWNGyD\njUnS/yJHWsPuiUfv6/Hg3SADvlEHPzTez7hnTtoOGmF8yctgt7o3SC7QpZDE\nrSot6gQUW1Ghci6c1cwfYSj2K21SN2zi+0M566xKJtfbyg27LXV9nHV9aazg\nNvrpnPmUGo93knkKcdE1zyVuXVoL35c3bCJYN7hmyQHE1I+iM62d/Tw/Q8+h\ntmqxMGqWMcWRg0b2Q4TNVVE6S/wPbOKttb6/+pGI2co5xGqE/8Qi0M7UTXSL\n+EbopM83BA9Jk3j1R8rrPyqkE+iT246Ty0OLJTXQCQ/pTPvr0sOFIGTAY0tK\nMMgMZHTwyP68SMrgbJYez/iM8gvfWnOeGUPVk/3VbqH/ui+65SHP5JdI37wr\nwE9pk8UAwvFLsFIwOOO/J7S2Af3Ps+FVPDpiw/zYWYn00LyCEigee+dN0IUV\nFBFt6ztzB8b+O8SohVM1szQEMSQa65UKHgH4y/9SsbiBQ06Jf3c5sDKLPEVb\nA1UX0Y2yQQq4fRO2k1TGM3VBi5PDLjwJHPopbUlCb5hIN+GmEfgahjtQDUhg\nyhL6be1aS3zKb7Xe0APLidm0YFVaXDW86JDquhTee69X97578yXdEYTci5g4\nIWK4XP/u0PvQ0oPePZKj2j4gTEbSNzWsau3dWrP5m6+o/dHbD6jlhcShPFL8\nfldE\r\n=NVc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpSU+Y6kzEZa3ismXysJ44KPbtf7dI4/ugLTpNlfitAgIgHrPrlm5vGrjzbvOQo2CFNa0WoE7D991q0MusrMtz2i0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2b690d6807e5fb93a4946bb6ab272a504baf8bf1_1616564223690_0.7518124835248283"},"_hasShrinkwrap":false},"0.0.0-b79c58207b159e1ffff1b619cb31d571a00cc04b":{"name":"react-image","version":"0.0.0-b79c58207b159e1ffff1b619cb31d571a00cc04b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.21","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.4","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b79c58207b159e1ffff1b619cb31d571a00cc04b","_id":"react-image@0.0.0-b79c58207b159e1ffff1b619cb31d571a00cc04b","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-UJcdUxfr7xmT2iMM94fnKnFCXmBeZxZ65XvRlfmWdsdMxsyv9Qokc8qz87l11qrQbcHC493vDuFEGczgwtqYiQ==","shasum":"ff1dcd0440a06d1eaa814ef61fb4dfe9f62aa077","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b79c58207b159e1ffff1b619cb31d571a00cc04b.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWx+8CRA9TVsSAnZWagAA4h0P/ikZJYZb9sH+r6TCSwC3\noCojRTfRjZo0VghDI8X+E+EI4Lv1aF5Xf2SnRwga8fu3SckuywhQ3qf3NjuG\nv4LnRLnt77vc3ALiXU3Fx1oMez2Ol9mBIlNVUOVrhR9/NmBimmkF0g/FLQWU\nEzyNxDqz5mROpNJ3NoqNd/js5YbnfU463MOG8W03/wMRyFLjw9Ia3gcoub5z\naFUjw+l4Moo4S0BGvdlalftuSNvkIpy+SHdlsZtfJKu5wlRBMmpfNJ70EFuv\nDqSBiMRXE9i7EG0sj3HKjcFJ694zcJgaUs8j9fHLtIopURjG/YusaqW8dlA4\nLTWbQcZ2YYM1cad6q8BUsUfptY96mLtF73PFwiPlWKX/kwlpdtH4cTHcWVMx\n4ufk6L8++7z6bBLDE2F7+OHAv30PqGeB3CoF0IhH3vlQ0pG9cpbgW4rJ+le1\n05S/7TSwMvAF3FArAULP+HLnZ7dNK81DugwwaU6HZEG9aD3Nant7yz1TRTnz\ntYgKwtksjnXn5vWmVsNDQ6r7I9+Um7GjpVuFRw/F7kAAU6kwacIfZydsYExf\nHgGwbrR0uxC5lPqTffwlhh7bmcQxNiT6VsFgqJtT2JAe/cO+ikos470rFPJa\nMCLNC2CbsL/38c4fGwwGSv/jYt7pnvCt6aJayxs5JKchVYVnWMEVc6oFx+0o\njM/g\r\n=oeoA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCen2kVcClfjE05cOUq8gY4SL83yVFdT9qVyndegxptDwIgMTMElc4vwgyyKrit7nlDu4pPYmEVqB7bqjG1SRdBs70="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b79c58207b159e1ffff1b619cb31d571a00cc04b_1616584635847_0.047701342268962055"},"_hasShrinkwrap":false},"0.0.0-468c15fba2f888f17fd656c39355f5bec23003d2":{"name":"react-image","version":"0.0.0-468c15fba2f888f17fd656c39355f5bec23003d2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.21","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"468c15fba2f888f17fd656c39355f5bec23003d2","_id":"react-image@0.0.0-468c15fba2f888f17fd656c39355f5bec23003d2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-6kCS0AukpLTmwJjTSP6+W9RfhjJ2+9ax2lPxPTpv3CbFyAio+uwQFA53kKVBuyfQLwda6l27gV4ION6+g8ESXQ==","shasum":"e06e027f8d0cf0d02bd4a6abadbc869bac9bf1cf","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-468c15fba2f888f17fd656c39355f5bec23003d2.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXL88CRA9TVsSAnZWagAAulUP/3DY79do3HaGplkSh+yy\n5xjKvDzEyhRYHc0XJc3NZ4ETUFt76lOk7zIGQ12rhgn6xAMFawFXcC4S22zU\n1Hc+seSr74fOXe+uzgi8Y/BNuOJTjE/998wkn1Zctjb2cN3PzMgFbXljt/50\n9kDl9f3InfrXWfeYJH/6BAB4GXbSq+bk4J+LjNilZvGNEq9paDrrACIHbcy2\nxQ4QeDHxG9IQYUUmDh7+oH4wptzU7S3GIQMWEDBp+CZ4raqQ2qognAObReBK\nINJ7v9Iu+nV0Qi2psj735Kdp6dN/WcYSmA1b46bAOSD6Cdidf23bKkZj3AFk\nfiDISxxluQw4pADWhl0iV9fu3iTAVhhn63YZUJTtbOkk8W07/7+LLAkTFgzY\nz7OWFUZb4aKjVEkQ5sjgR9u5BiumjRlkyPWq/vkX8cvehdIv8/YovMHfYzCr\nBbjEKAAQS+lwBTpmhLnlpU/M9iJ3celgzN3v1wGfTIjtaBTTdkuxzz4fW0oo\nzRak3f54Ne/iP0W/l1Y1O0AUg235VaNmjRgkebTfAXLmUVXn16yLwuxRcYzX\ncxRcASOlNOM9E70JWCmgSnzPHi4vV164Gn7Y5g5KNWshdv8kUKEWJvKetk9z\noCHhRFXAtL055FDTk2B2pTLbp5BEjxRgm7miD92u8xyr/rCYuUbvIUxNbFUj\nVDtO\r\n=G3vH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlaFF/DSZVBIvKgfOFPNR0f/pvngk2D0AtfAuIN/YmogIhAIO52Pli4IrIuuIcNzIWA5pPMfi+TrxSJ9aF9T6u8xes"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-468c15fba2f888f17fd656c39355f5bec23003d2_1616691004313_0.8537125807258421"},"_hasShrinkwrap":false},"0.0.0-fbb8e26b0d3c94ab53ebb5929e40f2e2694e9d89":{"name":"react-image","version":"0.0.0-fbb8e26b0d3c94ab53ebb5929e40f2e2694e9d89","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.21","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fbb8e26b0d3c94ab53ebb5929e40f2e2694e9d89","_id":"react-image@0.0.0-fbb8e26b0d3c94ab53ebb5929e40f2e2694e9d89","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-e5ePiLulR2V4D5zWmi88ZJ4fRbsX/jtmcNW53/asCVPVV1bnnFUthPabpup4pemGXT+X7sERX6iU8FMV0VGbLw==","shasum":"b86e9013a48fadc505367f5293aba0f6f9d39b4d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fbb8e26b0d3c94ab53ebb5929e40f2e2694e9d89.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXNgBCRA9TVsSAnZWagAAQ6YP/1WdzTXoN6UAVzths4vX\nH3dOu3sP4O1EU1gcTZAdM5uFiwgwPiwBtI3d/w/a6XkKeCkBMBWKk4OQfSDD\n2gk8Fv2phoHDecBeQ4vVlZ2dHu3oydgx1dcHqPcgxye7OfhcqGBA0fkHHQJ2\nClyomBo5KcmBFHg44FR55jHi4dzrFZyRNtse4hWbM5kpu3RjuDWAdAbPJplG\n9X/5CbCsX1FuIL6DVsD91E2ymwDHnkrXzWRg2oEKK9KYirY4vXnZZEgbGJH1\nVwQi6ronVaWSGqd+leWZHpgqe8TpKfsr+mlSVKYllU4TRpn+d0uAKTjIEfaW\nK+H+9Tw5tuCiISomFWVlkQiG+dXaU92rXsS1r7VK7stqzEzACRL+HrpxnfP5\n6QYtLD9fnLOyFMa2SdFS0JgXIo7D8S2t61YTkQQyl/cwpyJCsuL7D7JITdsA\nHHyeVol8BFNPdt4eDXm57bwdzS/tw36Kzr8LloPptHUEcASfO1Hi3SPGQCKw\nz2PBigwO/jMciCTclYlqgXpgiwOfoUyIwbJ8RO6nLGjeDqmlnIF7cMa7AhXV\njmrPq9C4eIlSA12orP+Fc85dwJZXf9jtG+6QaetOIjmRsaOVdHRI8HwsBM5y\nCFejZzn/bNrha6W8MhSxudf1OItaBSapeAVwIzY9pVpS6CoriogrvuTT69Oe\nrLqZ\r\n=hLj/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJNIOUcnsUC8sVVEAcSK4/I3EBFm3l3PJXscmTgOy94gIgbgVopZJ8NkY/Todt2wit2dLsN68EVMVNXswpwVavXIw="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fbb8e26b0d3c94ab53ebb5929e40f2e2694e9d89_1616697344942_0.8434464974659794"},"_hasShrinkwrap":false},"0.0.0-fcfba01383d77c32433dbee172667ca63e20a519":{"name":"react-image","version":"0.0.0-fcfba01383d77c32433dbee172667ca63e20a519","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.10","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fcfba01383d77c32433dbee172667ca63e20a519","_id":"react-image@0.0.0-fcfba01383d77c32433dbee172667ca63e20a519","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-k6REtSzp11ulKpQQB3wOL+Fw/TGlCwVkB7dS61EU9Mb/Oq7nU6xm7suc08a6b/msqYgwaaTVAxl1IaFi2jQhXQ==","shasum":"c5b11faaf1f678e4d44deb796c812adf7ceb2723","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fcfba01383d77c32433dbee172667ca63e20a519.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXoL1CRA9TVsSAnZWagAALCAP/iZdJNIxNDC7LdYTZPwo\nrCmbUxJP/hwTALXvQWjjQECLxpHqAaht1s3Lg5TiEkESmN16xRpBbqjioE3c\nEsePpsF4s3zCa1dE+Fr1VanH3EPCZq2v9zbITolZFq81HniVLMAwSJ6LeHJb\nHmLGlYM5YOq29h5/3g4sMZ5XLBKOl3sIMrwcr2mexxquvPQ9JzXKb1wzynkB\n4aXvd1pr3EFUtfYh8MZyy8KCwO0IvrvrkcbXmQlD6d5dXdwJrt3v7bznXVHu\n3ADk7tXdaqVx2HR9KbivYqDGi8eYopFbYG5sNKL3vfJCCaX++4Q6Zj9qfsiM\nRHC2gPwsdQUkoWmGZwFzAW/KYMd+TcKDyfrBoX6JKPifjRoFXEQKGWPBF0Sw\nqrCJKR3Ys8e9bY3uWH3elWtR/0B3Xgm0xko1Qz4LpHja8VaIN5ipW2rWkGuD\n27j/1ZKhG/qA2HafQwDD/xr4iSe4SOVo1JsW7K/8hKkua6x8yDZDU3tbq6Wl\n/L6gUbckMMtP6r/6EfSb/yGo+VXEQCphQfkzvWtOnkyBCXQdNBI3dqdd+bl+\nMQXDlp5hKKkWC4vwMnsL6ZkGFE5zuW0mqpheB7v6wxhlyATZ2oEYfuRqhVKQ\nalFoB05VW6OPu6tJYCVP2h4AlMzgdF1c3Tx+O43T99b9Tv2+NVgFPrMNwrb3\nlLNW\r\n=cxfk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUOEZ/GX5tAQXeHfJXe5yfMwM1/Iq1AuiwE5omN0TwVAIhAICwOwmfq1ilx+QV4P4oq5uLDQzyovXuNczu6jLB34Uw"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fcfba01383d77c32433dbee172667ca63e20a519_1616806644851_0.8112946156077536"},"_hasShrinkwrap":false},"0.0.0-305f6cd89a10b27587c9532e26ec5502552cab0a":{"name":"react-image","version":"0.0.0-305f6cd89a10b27587c9532e26ec5502552cab0a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.13","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.5.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"305f6cd89a10b27587c9532e26ec5502552cab0a","_id":"react-image@0.0.0-305f6cd89a10b27587c9532e26ec5502552cab0a","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-xJB+bh5dLMU5RuiJzOXWIdqUnTATwAnbkPxcjBLjK8q6xKhQVCaZeRUGIBmXWSIYSm2Sec7vOBacX/4ksHCVkg==","shasum":"254dc6fe958f5521f244421a6cd970c473ae4e48","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-305f6cd89a10b27587c9532e26ec5502552cab0a.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYA7zCRA9TVsSAnZWagAA+oQP/2x/AMhSH/FnqJKb9pXp\nrIw6HG+cRJqVlVHJmv2buvT49LjFpUgHUU9dqkF2Kuey/JHOk8MzpjwQJRR7\ncMMm6DjrMxeuZbqvlap8ZFydk5vgq+mGN/4Uwj7oDQ4de1w3zJ5k8gskg6uw\nBM/oPsS4EcooI1aWX3AO26+Z/LuH7yOPzQ3nT36i+iqqT9Az55hpvcK8JnFS\npoklErQ+ro6N0UI4IW1/80I8aq8bsIm3Cd25Zs8e5CaECMjV8qNkpoOC0f8R\nmIFvVRVR7HAmEToNmgSVtDJQ42u+rPUy9tbDklk8m7ZFczTAXXbUR7b4yY9M\nF8gGKsTpr3N34CAbR5dXbmCIj2uHIhJR3fYMT8wXONuFQCvKxopypULrZQWZ\neevovu9Ws0nWRJbUaHuMPyE3FD04Gg4FKiRVEPYfo9D6hdJYIpxPt1YDPAzv\n4YuSGHwxEgYti9foetB2+7zC9bE9g4aiyKZx9lbyI8PgAY/su4depObXZ4KP\nQZQr1NTeDRRwtlmow7UhxeJeHPvSYpFIgR3aJDv1I7pPIznL1PQlOLhNlki+\ntIpUJtN3PiGl+sYP0WIhOKJmvsf9s8F78sgM/5JW1zyT8oBlEneUZsYcyMdf\nvnr3r+5ShdYheRsljHnwfxRYg5nUInzBZE2w2c0y/6sCdV6K4XQcmRNYnI7f\nNbMs\r\n=VUjk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdRZMzRN04CFNrvxL8D9uFI8cKWuJWEfiGUFEDyAUMEAiEAieE7pcjvGMbRQPCXh3Fb7xJ6sCAe/d2F4FMgTI75wRs="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-305f6cd89a10b27587c9532e26ec5502552cab0a_1616908019383_0.636776301794989"},"_hasShrinkwrap":false},"0.0.0-e65ca6429ae7af163bbe7c7d6e3d1a46246b2ccd":{"name":"react-image","version":"0.0.0-e65ca6429ae7af163bbe7c7d6e3d1a46246b2ccd","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.13","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.0.18","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e65ca6429ae7af163bbe7c7d6e3d1a46246b2ccd","_id":"react-image@0.0.0-e65ca6429ae7af163bbe7c7d6e3d1a46246b2ccd","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-FfGs+roskAiGc9pPVTIZcOj39fdxZ1HdB4q7fOOGS/uFzlNUT+76O5Nw8WDn62SxKqm1+fth3nytn7XSvOnDfw==","shasum":"21b190ea9c3e1006d4b361fb9657fc3cee076d95","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e65ca6429ae7af163bbe7c7d6e3d1a46246b2ccd.tgz","fileCount":20,"unpackedSize":38170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYf1iCRA9TVsSAnZWagAAz5EP/0xIXGZ5lc2ShsS8/w6r\nISkX68/Vh4g9B2FoCDF/LDEOPsawU7CcdazCmaJekMWCM/B7m5YFrbd0D7fr\nUXit14Mz8hO0UXIPaUsm+c54n/CXfaECu9f7m2Zo8Ddq42rXHeiZuubh84L2\nIQlptrGgDxQ5kUEddNpZBwoHX3pYwwhhTDmAlJ/I24GvxuW8AyR9qj0GMaj9\nWrnIHp1qYuxi8E43L2UUUTfgFfvZS9ZR9pRZpLhs23bDspwNmUYxx1Dl1Rj+\nDq8UJUzpR08qoqYW/yfXn9oCGPcsz7roNMvr6zxTmRh7HfDGH5nHcrXro4Is\nbpiXei8wr4k//Izjx+mTRX0xgIng/39dMa9hlr6xOa8sxx7m5J4UlA2vZGsi\nOKkjkdFibmcYR21+PBa0whoBsLvto6GRK2SSHtDvFD/kynABKhCc4j6/gQWQ\noPb1XHwRmYNDE7+fv2Nu/xT0HuI4T7S1eXY+jCka0WcqwXAu5mxR8szjg9Ec\n8sp0BtfH2a/XG9VKTpnZhWT+X+4dtOvWBBpL3rqwWIPEPD4RrM2Zap1SBUkS\nMUjxb8yVvnM+ravuDIwN3yv+sl8SxyH/MrI95R/S1X0HKC6tvyqHuIL89/0w\nNNqJ7PZrnf9xf4VGaIso9q1m0HwVEtXMuAi3aJPnzJJKD8grN0GQ15gsqjf6\nLbEs\r\n=EAkf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIu6SnRMODBwOPPn/MrVfhisc/2ijefujFuF+sRqZiOQIhAKPmEaFF0VderAN6guPaJ30je+QyE81d8G6Rv7nqdlMx"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e65ca6429ae7af163bbe7c7d6e3d1a46246b2ccd_1617034593475_0.10059863345598541"},"_hasShrinkwrap":false},"0.0.0-5224599f5fad5211a7b4744504c8d70d37b36f81":{"name":"react-image","version":"0.0.0-5224599f5fad5211a7b4744504c8d70d37b36f81","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.10","@babel/core":"7.13.13","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.1.0","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5224599f5fad5211a7b4744504c8d70d37b36f81","_id":"react-image@0.0.0-5224599f5fad5211a7b4744504c8d70d37b36f81","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-UzF2VzSrIhhzlzluWhSK/O8gDJ3FVYOPZbn/EtXf64T2BL7dku2L7/8jpUe3WtDJItT1zkNOiBinWOp/Z2efdQ==","shasum":"4f3746552467a0ea317ba8af7f606513f8d4e9ce","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5224599f5fad5211a7b4744504c8d70d37b36f81.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYmb6CRA9TVsSAnZWagAALC4QAIZXouxfLKU/J+2shf4A\npm+PwJN0GFZJkfDYclTME48e2Z1RZhyIeZJ91IrR1ptWp/RWK8kEnhi3JoOk\nkvh0S/EgdHBHMYv2Unf2IxYyHPpB2R4gHKwjKJWPskPmhPfdTksxX2HpFwqo\nUG4ce681to61yk81IiyTEzFAMRONSvPmdhwqgSZlpBNOusywh0KKmTE2xDS9\n4Y/oOITaQzp6vgR68sXpKj/1C4dUcAtN9gw4PEPijgvtWL4rUbiXNHUxUYoU\nfC0fNJhfLJYz5nxaoeMYpi9nOA92Ooo0BVx0jQDewAH+wCXEfJN3YUHoaK0X\n41VnIplEmKyMkxo1aN9fiQVGLtJScLMOlHLc8VBbfoc0FiRfMVEXQjKaT+CU\nrx7mHbYAjj1bMEJ/rLYFiBH5bgHnCBgTe3tX9z/dtZWcrh1iiHrjb6ctML5N\n7Vmo0UZnKaj8f4kJPJ2ibmsSCUCKMm7eEygk9wWZCEngz+vj5fYd/w7T4LrQ\n2n3N4T5z9kj6PD0JPydh5Yij9QrtbnSGStgA63j/xD0+9OcvoG+JkCOwpzCx\n4QukeigWryYqkknATljfLAn0JCBHK4JjxZvl+HRUdWtRfrIlHQxWxHaSH+yN\ndmHffloVtKp33zXuUufZkfLiWDhaP45O1E3/odBwUvbcAIcFAJfpVi88BVRZ\ncEfh\r\n=dAP+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfcE9msFyc2+YEd6KHQA9Ws0rgnEr5LKzEPWEwtjxz3AIhAMClq+Nml/W1r7XrSO3zRIONDglyQopXRV3o8o5gpVoz"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5224599f5fad5211a7b4744504c8d70d37b36f81_1617061625688_0.2297846548275042"},"_hasShrinkwrap":false},"0.0.0-f161033e4b7f4631c0a6b20834c0273dcc6bff67":{"name":"react-image","version":"0.0.0-f161033e4b7f4631c0a6b20834c0273dcc6bff67","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.14","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.42.4","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.1.0","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f161033e4b7f4631c0a6b20834c0273dcc6bff67","_id":"react-image@0.0.0-f161033e4b7f4631c0a6b20834c0273dcc6bff67","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-JWwiUAp/1WyFyKeuSWDnA4fwH7pBEKZdpk2P9VgYSC3fX/xuw8pP55/dAScI17rmqffMSbI9Mdk/xqCvYGChYw==","shasum":"c7870303cf3a4e152b1c7012bb0d1541b2f71245","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f161033e4b7f4631c0a6b20834c0273dcc6bff67.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9bbCRA9TVsSAnZWagAAO2kQAKOyPpNT8y29hzvDs0hC\n/2o31VEYS75tzvOGSaamkmThXdt2cbzIYm+G9tpaUoNPmAAMc/G+5nwZevc5\nZcNVm49TZnJRzf0mDdWIw/qsWokk9r6gc1FjyQ/XyFM6Pr2kQdb1/dFTPm6Y\nPuQKjXQSboShx69csdb2bb3jwcoXHiuHecEETuCBOOekGqAM2AOGf4d/rFMr\nOAr0gLIoWUGZ8J3o05dIYa1CtWK2vwgV0PAAq2J2kt4hsNqwYqXWutKNxXK3\nxahXhOiK8/G1802K/s1Y7V15efS7xu7djwrGjIqvcft4qvjOWYvlHzB+mmzT\n4d12Z/mHMvPpfULRmLam99A0BRPFuuys7UaLSAXy+amnW+JWyuXbOzCInbYm\nWZjfyp1sDaSRrhYxu9CflospXnU3etAViGjb3pXUE2Mc12tlK9Rwkxayjoqo\nlkRm1msy2XugEG0kHM54FnG08oQXU2Pn26oNRGP0W7V6dha7HtyFm+6DgOn/\naj/6G4qFO51Mwj53oLHux8tpzIfyMH9dfYb5wyCO02g1GEXi1mhEq3HWaq8g\nYV0DEEWinuI+bvwCH7oNdeZTPtjL5FQCe7+ZnWSnMw4gx2zDTWkZk+tn+Yhe\nfoouec+IWF0Ul7vJA2/7oOPr897NkpLcjCf7uCvzxm+3nusywtBfxJkSyuJR\nYR1v\r\n=50So\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD42v22Nt8wBIRfGZAE/N8N8cBRzTe5xDRVJa9QAtYV4gIgZ7r/yqve6O/dd2X+Quk+lgmcuMdUfaIpxdhJB7dkwvc="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f161033e4b7f4631c0a6b20834c0273dcc6bff67_1617155802518_0.6747890480552792"},"_hasShrinkwrap":false},"0.0.0-272f05d90c403ba52e0e111210d3d9db724ecd45":{"name":"react-image","version":"0.0.0-272f05d90c403ba52e0e111210d3d9db724ecd45","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.14","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.5","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.44.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.1.0","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"272f05d90c403ba52e0e111210d3d9db724ecd45","_id":"react-image@0.0.0-272f05d90c403ba52e0e111210d3d9db724ecd45","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ES5Bbf+fvR0O6QgO6hOHqcCp2u/JiGfomSunr1EYgttoupcV6KathkZmhkRdId8A0yYbkf1BQ027pT//B+9d8g==","shasum":"0f632d7dd4ed5e6f9b2c85d29d08a6c450114986","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-272f05d90c403ba52e0e111210d3d9db724ecd45.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9/aCRA9TVsSAnZWagAAzAUP/3gMtlNb3AbKPJNyGZQp\ndpCROmganYS7Om0i044D43ruDv0eWdkf6S5QUOxw2U9Ct3AjEMPeVDazznm8\nelCaPtONpA3lcg1AlieNd9BVjSy5xb27SLaUY29ASqL3e+VPCFhRtPYDKMcs\nNnnsbia1NW7N8tjJ7Y6NWcZl+a8DESzdnkdx1th0SsL5bqFtmK/lPNuA2200\nRMDjRqOzDiK295F2OkUPSI7MpJ6mqjj1ReKIudegKlU27QYTXW3zUCb9xR9B\nWXcwI/yoQaYNhETADGNP2WsdhR+yT846atl5EKJeClIPiMRvYnZSbmBokQS8\nft05gfA8GOcrnrjH9Biw9ndg/wlv0U76zvFjRevBGcOPPqmyjT04fRnubdQw\nVSmkeHICdaiiMrvnMZ2kiof6tRpzkDvKITVA5SA8O/hXaKNeUEoQbGOYo+7g\nlFy7/mYqjltwtqFcKHS7VmYGBo8nOfOiTUJgrHMFVuNax5pNXM/V+BTSoCzI\nQvjhDiPNj8oiSoFROQ4SoW1g/JdI7PZ7p9Iqbl/q6B6p7xmb+AdxlPXBCiNI\nzJdaWODM3aCfTyMZtj0lQLaFRCWwQefgg0ugeEClgvsat/MGNUDfIbFMDBt9\n9CbOFUq74v1DadNxCWjpLTBiBp24vYoxfjSbJoUg/qiYDJraquhLb/5gm9Ni\nOsrj\r\n=EqzF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/TkuDuu7vD5OJt2eEFk5OqJjPhcGiQ+Q5FBlHhjuOWAiBqyybT2+SJnWwbXb6H87rLD8BmbKgRvAXTxREZQda6pw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-272f05d90c403ba52e0e111210d3d9db724ecd45_1617158105852_0.47852003146489386"},"_hasShrinkwrap":false},"0.0.0-78c866c6e8f55980808607e84601c760164b11f9":{"name":"react-image","version":"0.0.0-78c866c6e8f55980808607e84601c760164b11f9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.14","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.44.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.1.0","typescript":"4.2.3","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"78c866c6e8f55980808607e84601c760164b11f9","_id":"react-image@0.0.0-78c866c6e8f55980808607e84601c760164b11f9","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-ryNmN0Ierdeci6kcmuvB14zX+wpQN1Sr3BDtqY6T73tayGUazfO0T+OpKIWHM5KquezqLbsjBex+HQdkljYyEw==","shasum":"d773bd5835005c8de80f554b58edd93c7bafd2e7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-78c866c6e8f55980808607e84601c760164b11f9.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZYjuCRA9TVsSAnZWagAAYQ4P/17gMjS45K6wpaKS1YCZ\n5h1y6wqq7hYfvHMjBT4N/2tSuugA14n12h8L/uQ/5nbiRPQhWhmTfcx7OaUg\npDWb0toa81Db/F8NtHtejkN0jubdYrB1EOVLS1VqX1IWqKt/nbhhMYUbpNsz\nUF63vicqCp0dzOUipEYJC/IG0SjTV7YLBZX48coCOiC8A9tadmHjnrZ7G3Zo\n3Ee4AXs+SB4R842M10cj50BPIW69TTOGfuMQ6KfERcNYH2t7lYYqNBTHbBsS\nBHmV+wXkPvnMqehy15NtQoKIUQwoqIxTTHQx7dUQ/1iwd1GKL5RH1SIeIom3\nLbSI5nLJqrFgI3jRB+za8u4ZeVCvK5uvpgoBgJJcAyNccl0iexvJloKdMEn3\n3hw5ZJiql6NOOwP8/WMO4vBtTXIho0GEePrXnmDuBfPnM2xVB2QtL7sJ5XnR\nEJvQEEWjrqn5lPJszF3HvCTo7pWPtXUKg5ZemfQJkeKjGPwmCqw4iAMo94L/\nNlg3nRTg/N6sIFFJwDobL2AwT+L3tWKZ25ovc6+hYtpPEUIG8c5SQ3mueA1l\n0N5xwYe/7d+ETDJ60O/iyspQE5OwsEfqpOZUn6Nulg2awYYSd2otGR1MTEYd\nCEnFf8qHbYjFTq7cQ0LXxVrAMV84Tu8g360VcNLUrG60ei5iqmY6mM/jKsb1\nb/xE\r\n=894S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2juXFN8X/oW0zJGrguOaYrC0o+XQ4DzbxxMZLwdp11gIgKKU/D3549TBvz8oHtojWXYt5at1vrn+43i/zNyJL84M="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-78c866c6e8f55980808607e84601c760164b11f9_1617266925497_0.8977008651436866"},"_hasShrinkwrap":false},"0.0.0-ab3a89d0085f91879e7bfe9995f2dbeaedbe456e":{"name":"react-image","version":"0.0.0-ab3a89d0085f91879e7bfe9995f2dbeaedbe456e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.14","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.10","@babel/preset-env":"7.13.12","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.44.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.1.0","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ab3a89d0085f91879e7bfe9995f2dbeaedbe456e","_id":"react-image@0.0.0-ab3a89d0085f91879e7bfe9995f2dbeaedbe456e","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-eqVj/LRAbngk9DBXbnBTmcVesE+1CgtssBkDN2goSwVfJ8YBfOzYvlW/PNwb/WKv6yXMDaYMTdBQPRNVG28Qcw==","shasum":"e13fe671412ac43b982fbc7d0c6ae023c655f8df","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ab3a89d0085f91879e7bfe9995f2dbeaedbe456e.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb4e9CRA9TVsSAnZWagAAsioP/3JNvmxaGyvQ4ZUP/FC7\nVwht1DNesrdvyPcRlPAxwVb/NgQNud1xOMZb7uOf+v//tWCRgX9o+UIZENlv\nBV9qZHuCCefTaBp65pd7uQNtXdRV/BDC33CE3Rk7LTjfoIVXcsmQmvIY+0uv\nEvqB2Ujcd/7CB4VTc6Hp/+tBeTmcGJ9MnzkaBlzvaTjxre/0Pnoqifxxh2Tm\nxT2YJrDyvS6JBFjKycL/bxRsm+7159sZ0mjWgdwwll1gNqDuaWYrulUH6eij\nA+aicl3ppNPEZioJGfFIWFD2si4OA47r+MTVCR04mfEjcuA4kRorBxqkt4BD\nGiIUy9LpOcfoV50gyNGDMhcpq/C6X8DEKrpDShrnAIZYfuV83elrYgWosYnG\nNUrYzX1f2HgXlLNZvoMyB1foQGX9/zedVOvRhUnHonJAW0iM+a6Zu9vNIC34\n3A/Dg0DuNPpjZGVYiHG1LhQNBSQ+u+KdyWMnow6/sMhAesNsVZCOGMhpSuKR\nPSZghxSK8FOHdFdSMZ3IrFXLx/9OpiiYVopNKJkheiClL98RdbcF8J15+A3b\ncylx/pCPCtyEDvzlAF5RZhdovPlvVI/RFsT7LgDskhvK8FF9+lwpXgglq8I4\nSo3xqHvCJKczkTVcNgA132/Bt3nVqdiwTZZfQwM1W61S3W7qXgKq+7Wt0xxs\nXhi3\r\n=hgOl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBhJaduMYzY/9NtUP8XReez7I1sVVHZCctm0Gf91eVUcAiBVboqWf78MtVnJwVkk0x1hfxGQCkUAoAa+OXiYyZ6y9A=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ab3a89d0085f91879e7bfe9995f2dbeaedbe456e_1617921980686_0.9911744001295082"},"_hasShrinkwrap":false},"0.0.0-5c655ee1818cc39f01d095b93bb92b101df658fa":{"name":"react-image","version":"0.0.0-5c655ee1818cc39f01d095b93bb92b101df658fa","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.44.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.1.0","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5c655ee1818cc39f01d095b93bb92b101df658fa","_id":"react-image@0.0.0-5c655ee1818cc39f01d095b93bb92b101df658fa","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-9q35vbxgJhCG0Xj9MfzPUwc2dmgZO0N9uiFtYWq9WxYPore66V8x3nw/YBnxvJPPBrVA39rF1Pkwl1fYPHnaHQ==","shasum":"fc9b46c8ea491047134816a4f58f909b0086d428","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5c655ee1818cc39f01d095b93bb92b101df658fa.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcP/pCRA9TVsSAnZWagAAeYgP/RTjxSZ3q2tNGk97N0yj\nSmxchkbVP4cpOdSglotDoFZGHAhp6PakXmlkklvPjgR40Ct8wuBOwkCCNE9k\nBtMijayQOhVphneIdCI7HW0IAydlZnnEJMJXDZMsLxD33eZCjUZMESWyMlAU\nwwEOJ48bLqfop0GzCy5nKuocbKYUZnEyGS1PbnPYmmPvDJMJShYBCo8HOF7A\nFzazA75tMAfUEvkQiiFbihUOBT3qd1Z6q40+jVcKwNektDiS49wqTwLlsMqw\nab9oYG6vROE6/uaUq5RzRys9IpXkG3YP+SENX+nCdxeaOIcMduNINPsp71jY\nXpmdYbW/zyDTZGKpdhUrSkslCa6OdBtKoR5xVVlGmt43T6rqb2UtWDhDy5jc\ni5CRbWt5ozhGMkzAHlD1SI/suOUv514/No33svZH3evKhS8KR6Xa/mSYa2Hs\nhT6zFeUQ+wR/dg13+fSTx8qbz6Wgm6ZJq0p06no+9hBB6H3zX5ihc2Uolb0j\n7QE9uA9rBsHNGfszJgNB5HqB0RWy/528vxQedWihvFUrAN9nQ2npIqytdoL/\naUFGet704LC45V+BJzC1twUB4OBoy3u5ZNEfaehS6ioM12uV8EGXIM+p3LMc\nKH8053i82HwuS+KKtHLC5qcmof0OpvxXxvC5qYapKVX4bpsa1VqJExtThKBO\nAVDp\r\n=a0EW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDze1lnNLLrQtNt1ISiPkl0/6gS23avsqFKIhTK1z/UJwIhAK9LDLyrnRSVFZEU4c3WEE3a3z9xAe3sOqjnfSz61xrw"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5c655ee1818cc39f01d095b93bb92b101df658fa_1618018280486_0.09532590057644597"},"_hasShrinkwrap":false},"0.0.0-2d6b66c429efd079b55221400e24ffaf9f465aeb":{"name":"react-image","version":"0.0.0-2d6b66c429efd079b55221400e24ffaf9f465aeb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.1.0","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2d6b66c429efd079b55221400e24ffaf9f465aeb","_id":"react-image@0.0.0-2d6b66c429efd079b55221400e24ffaf9f465aeb","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-b5FUoBjpzIGCcAeg+0r2rk8m52MnTVcuPKKdtYq5Zk8M+j1kOcalcVppJUuvLrzDZIP8U4uH++94I+uATzdzYQ==","shasum":"036fe29e4250f0dec5265cec7425b138140bcd6d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2d6b66c429efd079b55221400e24ffaf9f465aeb.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgctRTCRA9TVsSAnZWagAA6NsP/3EWTyFOgJp5sbCidr+x\nj86PR56TAPp+xXphzNN2+QmXEQthZojp6VYbtQb6PmPmve16LjS8WckkMHtj\n6g1WaVzD1IZ6C+B0e2P8DvjKYzv8iHWwCCr2DpkFCd1QsQvMkFnlttWth4mU\nBZBS8Wf+jM/Cx+PELqfQxyZu7Gle56eOdJ04ZigrxpJt+VeKvIUKQW0hwHyv\n7n1nkk1mjTSt1qijzNlizd/p526wArom+1371zQkYvk4KZs6Pqt5vqXywrwt\nw+HIP2zUHvKn69xKUb0OmaVHYVldavF9Xalf+Ai8/4tpDiBclbSHxUQUbxmD\nGdMSQ4yjlXmgxbO+GjZ8hLFZnrTGmTiBwlBvQlFdV1itdqeRaUfD9j78DDX7\nPK8tlmhy7zcYe9xydvmlRO9Z+0s88TPmUZ0kJbZzVfmuCAm9JK3eC2QOb0CB\nyjHcaOUi/IUV0nFmL+v2DphxwwuSlUwRrHgdCxuA5ZywhToQ4XT3dudaUk2o\nplmXs/dEpi6F17Lb9fDsGB2D1yruWwc4mBBgBCzaFlhQSGW/lRig6KB0n20G\nwx4ZD+gidU8theeD63haHvwKTXQHsCAGD/KXvSY3CbBoI4rEMvxM9WtBdxyN\n+wc9hQlAPQdONG9qyys2RIdb65UZ99ufSLYGP7Ezallh9r1NTaOLKAzIGnw2\n+Ac2\r\n=+hl0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMn8bfoZs0+0qYm8Oml2umRlFWjcBhUcm+pzvAv3cungIgcXR1/t/kiJH4+T+bISyh9BpA68aIOwXoAcHY03XySQw="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2d6b66c429efd079b55221400e24ffaf9f465aeb_1618138195274_0.1933727680446622"},"_hasShrinkwrap":false},"0.0.0-1811fa2c6f27390210e92b2eac315fca5338690e":{"name":"react-image","version":"0.0.0-1811fa2c6f27390210e92b2eac315fca5338690e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.4","ts-loader":"8.1.0","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1811fa2c6f27390210e92b2eac315fca5338690e","_id":"react-image@0.0.0-1811fa2c6f27390210e92b2eac315fca5338690e","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-O0snlXpTyKpNq/gqZ4HDnckcW4aBW565iWsvUdwCREIgHTNbIA3g039X2+pRpXniJ58ngrTUKrkz6lRbCItaDw==","shasum":"85d1207b75a7f41165d94b9ba9d5361d8329151d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1811fa2c6f27390210e92b2eac315fca5338690e.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdr2mCRA9TVsSAnZWagAAoTgP/3S1KZ0N6iZrvCeye2Je\nvBGRPHfIQRqml5AdxJJGJJkoGqy3Pn9cOO0O+2sWqPCFvUtWfyIuWrRv5RKf\nmC+RZsslMvBoR0Q4oTy3RD0MOhc0+mxswZ/rgkM1YSCRJRvIhwlAvc2alUII\nXubAzN6kBvMF63jLl1XC9bqa3BWeZCsKEcSAieJ5gY9hKtT07GvCfQabV8VS\nXxuSmbUi+euiKeQ4jg8sq0xWrK1RygaV9ORRDrpCq1oGb4etH2sR5Tbjm85n\nS5cENsqQXEE2wAbsKGgWTwd9alXqMksEH5MHbkW70k4p2A+rwzKcthxVNf6W\nFVipXumrOJJMS22Qq2z7GD6aYYImZMcLurKgCysZ8EHVwuFNox8eB7v7rnYo\nWpDBn/JCD1ZR+79sJnm2/O87BuqFy/NfYltR91k94NHonfjruyqkVnsPxfO4\nWyBZ90X09YKXnz/Qe4dhhrsSTAcnvadbKq2nP6oQyJGNEvQ68/EzBKSlgLHO\niDmWHc+vd8sm2YwIWL1W6lGF7ufs4R8/FasAxGsRGCH+AjwHTwHhUomQ9r2B\n0tOcne4IINWGY4qVgv0eyCAxp/7mrkL6w5ogi7PmVklQJK+0ia26uzHRHAkz\nk9dYp6g3XNaCpqrt9YdBVdMHavvV0ce8bBYmBaYpi4JRAuIwYa0NqMn+jcyt\nAXXi\r\n=AbOj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD34iXTdmfnTYAailqVt4wZ14mom2U7ZcCCKoxRpstKMQIgCYRGnBRbhlTHDqBjWsmj68k9yty2uF8WDtlioOCAMD0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1811fa2c6f27390210e92b2eac315fca5338690e_1618394533689_0.8495262906457757"},"_hasShrinkwrap":false},"0.0.0-db9a124b446fa82112860ecbcad5272e9cf707c0":{"name":"react-image","version":"0.0.0-db9a124b446fa82112860ecbcad5272e9cf707c0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"8.1.0","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"db9a124b446fa82112860ecbcad5272e9cf707c0","_id":"react-image@0.0.0-db9a124b446fa82112860ecbcad5272e9cf707c0","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-R0hrz72uhoxiR1XCON1JMJQjkNPXi+EkZ6I9kZ3YkrM6UALlzHRmC+Eg/2ot2O3pTJv3C3XEtohxHUUpcTUq8Q==","shasum":"8744d06fdbe33c16aea3e76422833811cb6cea91","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-db9a124b446fa82112860ecbcad5272e9cf707c0.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefWfCRA9TVsSAnZWagAAx7IP/joeKgnw8BTYAqcbz7Nz\n2Zjn2nb+jvuxo2l0O98oahF9xrmWui2M/3rf1t2p5/hoTLhBzKzQxqoLpuLz\nsWwfUf0zGzs7IhjO3U94jzt8w104kCyas/3/6OGQBlGt6M0azCaggrBwJV3P\nf4NhmMYqEesegP/MgMHYdWnR86Bg86Kw7aFy0MywloqI57QVY++1altUs4ge\nE3oVPpYNaabgZiJAr5pwfE3th2LC6syYdQ5CGJjq5PdnpTej5H+wZu9tSiBS\nsPUnrfgbZsDNWwlX+uKB3HKJHuqf6V+//9TFX+JlLVN9nve9Z/eJqHDctvr7\nGzyUlA2F9rNMN5Kak/tz46ce/M1WPKtjBm17vc4O2qYfCAYiEjAc1XdBcFrb\nYeNfXkzkFChggkA01hivxj2cIz2tDdU9nd6spfTxeIYyIocw3Ah7wUIdY3S9\n2vRh+Zss3YgXtAWG2fEfU6vpl6CT6orFyfPWC2dwS66eHYwA5BHlzhBDPCD8\nOC18By1N2ytoeJ2HlZ4p/i/sOPEWxzgJtoLnxlXSRA1pnoXtv2cTIXBXV4aL\n3TdjLgs3H9WnqiDwg8Qmqv5uF/Qhx0KO5QgbS7kZUPlEiwLYVtzdEli/TCT/\nXi0OrB8N5eyk54XQoPpsymIy1cMLa+dlU2yalupG6czMVdoOBSqPOWuY8m0q\niQ17\r\n=RAl1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY6mUprTp3QuneBAME50kK1eDQ/2BL6yq8YRtVWNiSiAIhAIzf1vhafb0GVu4tBboSG+LnL79DVVQR5smxEf+61NdE"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-db9a124b446fa82112860ecbcad5272e9cf707c0_1618605470854_0.20307587120529824"},"_hasShrinkwrap":false},"0.0.0-3b85f6f2d7f48410b5835af17f6f8e793d9687d3":{"name":"react-image","version":"0.0.0-3b85f6f2d7f48410b5835af17f6f8e793d9687d3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.0.0","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3b85f6f2d7f48410b5835af17f6f8e793d9687d3","_id":"react-image@0.0.0-3b85f6f2d7f48410b5835af17f6f8e793d9687d3","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-WKwZZWvE+Eufp1QDDak26IZ2E6BfOV0IAmC7VS0fy2GAKnqVOspMrAhVJ41hSbAUeVlbqynIhCpQd9cSE5UxwQ==","shasum":"4061acb5a2a8c3e265345d5db0f0e9979cdf14a2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3b85f6f2d7f48410b5835af17f6f8e793d9687d3.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfhIQCRA9TVsSAnZWagAASHMP/0k2f9/7kiBf++Qw3A09\nf14SvP1cLr5J5BtRxbet6F4GGTdpJfIpu4ZkLQL5ZKRoc8MwjuKZPaoht9LJ\nWfiD7y0m3piqus0ErRPwgabDKqf25mCiuBI+/wXMzVRgys8x7CYloQniUjtx\nrUfKKVv58WXp3jGpFfICFCE75LcEiscL9qHGBbhXPQeisjq1QPvQvJMiXiIJ\nyuz66nWUsjJKU+BMkLGjLrnEsJSKh8UVMKKUtOPPZ+GDz282jlOu0ON8/tt8\nWuHi/qYk84wOBuSxdeZXI5TYKvqfOJQ4WAyBwu3tzO846F2RoOeHOG5AuGls\nJlA1m0+BwmkrI0eXGo4XYzTTkYb/zNNB7V7q1EwQKndr0LjxdTqlA3v9k5Uz\nCSbHsZ8ICCeh+pD+j9II8xarGZMyB5bFA0f9+NEybqePb/jPB0mWMGOi7JbF\nis9gaHjb1pQNQXQi23BGAKUGr0jwLen+65kpIhrDZaW7kW+6k1WXnyCzb9UB\ntbMJvDU9y4XlxewOhqyPYeDqV3IoANrgb9svrra9TE1xs1mipCCenSvC4ohc\nFrLtsBRsNzyWAQGo47JvsxhefEAKXH2Ayn2uEG5qCAQlrPGmnrxOll2ZEaFK\neVSRNa53qul9fDM9TLgLJO71HaBaZTqKVbu/LN9fEUyGKhBUfuExaFltGHVp\ndqPf\r\n=+xAg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbTZ3yPRGish1zF11gBVLd1JUfajRyQ8o6jTnLPftY0AiALxz3hkxvcOr3qPbFlUEkzcHLi8/WP2wnNCTMm01q2Cg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3b85f6f2d7f48410b5835af17f6f8e793d9687d3_1618874896466_0.13132240858136135"},"_hasShrinkwrap":false},"0.0.0-2be813c94d0fc8d7ae15cb5f33e3a6907d11c91b":{"name":"react-image","version":"0.0.0-2be813c94d0fc8d7ae15cb5f33e3a6907d11c91b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.14","@babel/core":"7.13.15","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.10","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.0.2","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2be813c94d0fc8d7ae15cb5f33e3a6907d11c91b","_id":"react-image@0.0.0-2be813c94d0fc8d7ae15cb5f33e3a6907d11c91b","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-9TSHIe5qa4mWxGTp59vIJeDQh0vmrPvFV1udgI68sIK7zPdUPiSp200Mb+8iJjxNp6ntM3pnKZSigqUn5M1rQw==","shasum":"6cd18a82d139144fe29b0b59c659da302f8fc83b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2be813c94d0fc8d7ae15cb5f33e3a6907d11c91b.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggLLGCRA9TVsSAnZWagAACAwP/2WptuXA1M/T3rdDmuM+\nx/jw0G+DtOf3bFmPCnuBGh3vDoSL2QkJ3vMf/PgwpYfJeYf961j8V3ZgIdqa\n1qapyt5mWgHmYbkTcR0WTbZWMPiArzQhq7GPE+is3ONt6/ZIZVobeqDxaNpd\n8fy3oAvpFgoqDrs9jjRVIfpC5y2v7Js2y40IZr4ikJ8iWgWfGNF9nc/lBzNM\n+rOSzA38xC/feegsbC2c4mzdS6fBR7mdzx83nW4Af9iG+eeI/TzhwowAtVPs\n0fylCT/uw4nEUGg19UeRbej8cSlhuXTX1oll5rqmD52LjRtS3q/NL84X798W\nZqFed04oyuiRp3XWl+Q+39Y5zLklhMfwRPNjeWNjQLkF0l/+6m1cMHmLvfnb\nY4aSmiBdv8BeIuB5vwWt0sR50EzbkkyXhiq40Xgh0bNB9+NIAvaRIb+5UFoz\n8ZO/tzvVjcDH4znPvmH9GFUUouAHGHNzX+iDwCaJJfM6FSpKKmmmjTrHm23b\nJcx4s3bh74pJOWGHje4k1Oac2IkDo+lZLdCVYf1y2TLZAw4WmrfyoFdiZF1X\nqFyRVHq57veVcFu1/Tt/3WCTMaADHx/eeSg2NJPohnCl8s3oTuXmAlsXZ81b\nZ5JtixpEexn9dMmTpp0g7sbRn/e3FiDCqNQyWcMfYWflJSUTQXblwuvy+7D+\naIP0\r\n=wljj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFlqy0EHcOEZCHXi+nsFTre9LtcxDITajj+Wl+ozMTPQIhAKRfjM0/d+MgeUZ7trgkbcOC9BTW5D9Tg2jEPBv5qsnA"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2be813c94d0fc8d7ae15cb5f33e3a6907d11c91b_1619047109453_0.1411184829848584"},"_hasShrinkwrap":false},"0.0.0-bece5322a6206990b477c185e134cbb1171fdc81":{"name":"react-image","version":"0.0.0-bece5322a6206990b477c185e134cbb1171fdc81","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.13.16","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.17","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.0.2","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"bece5322a6206990b477c185e134cbb1171fdc81","_id":"react-image@0.0.0-bece5322a6206990b477c185e134cbb1171fdc81","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-zW2AWbPs4hcmEFV4psHFQmHxpYs/fnJ3kQIFANGkBy9o0N5Ihai3z5T7TSvtL4ghc+usiEqgtvDoia69L4s9mw==","shasum":"1e5da05ca323fa2bd0c2ec0ff19405849b8935d0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-bece5322a6206990b477c185e134cbb1171fdc81.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggjSGCRA9TVsSAnZWagAA4OsP/j+klgSA18jiNxyTwDtz\n6uLOJq5/A6VaB0gn48RMWSATWreuTgzYj5RmfUpdUxoFuTAHVKFLBcT7Oo1H\nEpiYR+LJKrRc4ni68hTfi7EmqnJ+38s33PlRAG/s3zgTsFTQ4zjWkgCXymQP\nipW7tzyOY3ojy1t/APuCmy3qZ04m6Em38mIRWu19w+OHB0nbJtkvciNDeeed\ndZMqVal6l3Q8WGVQ+jc7P5P8PDHVe+LwgXxcXR9eI0QBvmrWFiN3NRv9WS8F\nRH1eyvQTquo+iPLPNIpJIrh3BrnP0xT/3rzmIMzdu1X50FfZsu3Yshy+BoAg\nmkUbJvjI4sykkZfn4QzeTqRb46+LKfksYRagceBh23cRojysO+YzoYz3biuH\n+QFO7tHDAp3VS4eLiGztUyaokw7nyUKCfKTiEtfmHWlwv6TL+ilqdee+eV+C\n2grg+HbI7Vx9BtREsffJaHMCbyb8OMpiCwGkV5a6k3tT8cro7MXoEj+ldxb7\nahfNymsbeN4Fw3e+x71sKiPZJ02mmCUD8qWvgll5N4tMuY+dUSOQvu8Xp/ZB\ncJlqep9nrC879TVNYILy8+oFGoQKdehQEBvaolmcRE8PW/k+EGoVKVOs6pDq\nMZpnX8+O0kkUu8om0zepUtUEvcStRIZthRADfvYi+0g+nsC9Bpv5aZPgsvtm\nAZLc\r\n=LJq+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBObAeYUCPrO9Z7f7iw94lxINIS9UrI9hNoLXQqmjhfZAiAh48ZYXa7+r1KKP/kuu+oaL5MHMrscy5Tge5CFk4K5LQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-bece5322a6206990b477c185e134cbb1171fdc81_1619145861927_0.04307785530518693"},"_hasShrinkwrap":false},"0.0.0-66742da49f9e5889d8db55a7a767a3e3a39483f3":{"name":"react-image","version":"0.0.0-66742da49f9e5889d8db55a7a767a3e3a39483f3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.13.16","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.17","@testing-library/react":"11.2.6","@types/jest":"26.0.22","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"66742da49f9e5889d8db55a7a767a3e3a39483f3","_id":"react-image@0.0.0-66742da49f9e5889d8db55a7a767a3e3a39483f3","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-f8nhXHHTjE3wWUeN9DHMk85VcmyLOfK7azYhW4xc4bP7P6prTq6TzxMhPXmx72/LsIMYxkx+oUUxwVJerz7SZA==","shasum":"528faf6a11bdc49bed488ddf61d13c1e8a792ec3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-66742da49f9e5889d8db55a7a767a3e3a39483f3.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghCIECRA9TVsSAnZWagAAzGUP+was4Lr06ztAOSBJrLrg\nloqLzty2m+FqUjYiUBJil8KXp83Q1BeOTxk+x1YSQ5T/yiyJWTMNvMLZKBSz\ntZYUDJXtsPhGJ+5sgDjz/+OBen/X49Q+EMXprhUe1KJfB1Q+NxZcITYeabFQ\nQnZ0ASvbvl6vCOXFF6mJGTnL5VYzgsY9wKvIsww7FFSWLlcQitr2wiSNHQKo\nLhDEj6YO6ym3HXLv3z1aRdDcESKpA3GYFGb+b5+v/eHbL93WErW8OdTPTEnU\n6gu0Yedw9G5IXMrcZEMJLaLXIM+WZMAphH1FxvPg0ThWUxwcLY3Kcag2BAgq\nt1NFaQ1OSrMXfjicQU3GwUN7QltGN3EOm2P2qgp761ywLyabxKoEmizcSbZt\nhfpdBfwQX/zbuKYnKc0ujUt0ca57N8GSdZynWlU3GXRivVyGJCuCXK9yNdqE\nAVlc4Fz1bpjabMbqkm8lmeX1hXJoSiJ5km1rcZry5ohFxveyYl/uDtA3PI85\n0Og3QxYXIQc8h5znKiR2/jOfxGNlUNYj0qRhqm3WyAiFTe7t96JSb2wECFzp\nUVwFcw2cdkFqOIORe2YzsH2recESeFICj4BTGa7Eh7R93ZjLHbIdHXaKzXNh\nWrJOHHDDVnYEJNGjnBt+xZS3reQoRAy/BxQF/uUqdCglZclFD+QgL7B16jc7\n5v+j\r\n=orHi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpcVx+DMxoNcukYV62/yaWwj1K3bE5zgDpZ7tmEp4kpAiB/2U22p4RTdpsjuRFMLZ6klMh1CpnCV8W2R7e3U68S1w=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-66742da49f9e5889d8db55a7a767a3e3a39483f3_1619272195782_0.6369412158259213"},"_hasShrinkwrap":false},"0.0.0-6ec7778fdc0713dcfab1c101cf72fba46b441908":{"name":"react-image","version":"0.0.0-6ec7778fdc0713dcfab1c101cf72fba46b441908","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.13.16","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.17","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.3","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6ec7778fdc0713dcfab1c101cf72fba46b441908","_id":"react-image@0.0.0-6ec7778fdc0713dcfab1c101cf72fba46b441908","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-oGtm0vBWtuO5I1vQVN8nYxKnkIitemUo+Kid+sUc6pi/uFTI18WtoZXElU6SszHrofuS3fCxbvC2mc0Fg2Tq4g==","shasum":"0a81c96eb8ab5c5cc386ae3f89a516cda5704c0e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6ec7778fdc0713dcfab1c101cf72fba46b441908.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiBXsCRA9TVsSAnZWagAAmAAP/1afXmYKE1QHmettyB87\neBlYXtGSOJz2pE9koAP45S2uy4+uGtsfkF7ZzHa+A6LyrK+3BYu5L9alAA/c\n5Ua4jjnXs+le0pijM4rh3Su1wAsu8iCg1F1xYFVmcbFrTVoTp0Vu2WCbQnXr\nEdS5ha+3ofh+pzb2t46MC4BFHjkcH5E9QLsCHJHJVhfKXfXjDrU2v+lb8wG3\nDHTkG76LfaHmlvzPQJN7ETOEKjd6pDom/WipkKZfzp38we4L0gjEplWgr/xw\n9hqpCNhujUESmqNKCnpC6sCAcqfoixnefYNmVTE2qvrl4hhi7W0GH7+xRM/U\niPypRVGw1thBRfK+TOvKcS1ABwKiECU+Pqkt5bpzX6PircXU5yZpmMTrt5m9\nrKXmzIYKn7C7o55dSl4sJtnFFjv266XK1p3fp376V0k5myM4Vh8lDTKcWatw\nXUkHnADjYJEscw4NxT7ahZvYdcJXJUwSwByfn+O4At5FQOlJqSaS0eB2noh4\npw45tnmZv703HsXMyl35zJTBqrX2Cm/oPDELlVl4/UN+sXc+65nuuwCSufYT\nbIgjBbNf3FnhuGBf1T2W/XDphJjW+SNvP/vQ1Ty2SvWkFGLiKuL/PWsSv4PE\ndnk/FAXfTkOvN1OIYaFwl8ezQw4CyxYVZZVAOhf2zdbC1waTSeFojsqKVyPb\nZkXB\r\n=uwDU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOJHpUCUkI0WGFVsJydcojw8Yt2y1bBZZwTrDC/PmheAIgPupfCGHZYn54xGavhJpmRvx92Macz983lrqM/VnD3g4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6ec7778fdc0713dcfab1c101cf72fba46b441908_1619531243910_0.7052029474779691"},"_hasShrinkwrap":false},"0.0.0-030c7e6f5d0aa44c8ad8fee8f3a323ef0d898291":{"name":"react-image","version":"0.0.0-030c7e6f5d0aa44c8ad8fee8f3a323ef0d898291","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.13.16","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.17","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.4","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.45.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"030c7e6f5d0aa44c8ad8fee8f3a323ef0d898291","_id":"react-image@0.0.0-030c7e6f5d0aa44c8ad8fee8f3a323ef0d898291","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-OyKJa0Js8u4x67UyIZt8juyXp0GMmv65CW907UJc8Tk4BjOYbXbMcY1wX2Xi68ufAqKs46CmXRinBaAbSZ9l2Q==","shasum":"77b30f987e10446eeb5fa7b1b751dbc7c5506a4e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-030c7e6f5d0aa44c8ad8fee8f3a323ef0d898291.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiB70CRA9TVsSAnZWagAABjsP/RwIfPISnvItQYmscRvh\niW3MNtGiDpSVg7ivI+sL02hmQohEXsBJhReE26cHlgp3fLz5h6CI+tqMEKw0\n+AAHojYFqDLXbF937k9J7G/VKMZ0XmUdMxFJIBaE3Z+TKw6jleZYGs94Ts0a\nAkXChq4e2kNAsMD/XMuHnh7Q+r4vsjTzgNJzQourkI4Zuqr2J7vzO4ZzoqL0\ncaOciHvro70/Nq3t/Sxte2R3BYnAa9Y6KPAkjnJPBcdVUcpelzO4vfoQ72OW\n76JvIz0wYFqyxkYVQzkwvw3cxpMUyxni+J2dqLnskJfh2cvlCKqd9qLec9Qj\ne1zMKapYXXLzHdPez2ihrxNz1yTWl4WLuU2Nq1RnoLRN3QSohygy6A1SP0ZJ\nCboEV3/J6xIg5ZStun2yejfm4Dgsc2tycoz78MP/EVDKtfQN+6lrgxtDWyIn\n6DpXu/sMP6AaVLTHrVIWMl1tg6rDJ/9rpXEdQF4E8YT9pPjID2yVNzHUzgkL\n31ro2x+J/RqYbca5EQgoydx+hkwTe510ZchwfRZP06oTcOyJb3fiWgvZcOTq\naYh04w4ou5mWAyeCAJqMZEtGyzEdTjmAgkgREhESVFX8+ADzTtpdQVT/Jpy6\naPVfHsGTnhi8shjHI7IQdl7nBbcDoM7AKWASQOqWsG8/hpQDfi56flCQfl2v\n8lmI\r\n=EvI2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAzUX5JXEWWtliPf2N5oOSW2Go7dgXnJnUI5x8ZXxrVwIhAK9n7mMLvrxFR2qDNxxxg20/F52z1JnIqg1tiNEm1iCD"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-030c7e6f5d0aa44c8ad8fee8f3a323ef0d898291_1619533555999_0.1919171054096025"},"_hasShrinkwrap":false},"0.0.0-acc52f6a246e03c9f618db309ac07e60abde796e":{"name":"react-image","version":"0.0.0-acc52f6a246e03c9f618db309ac07e60abde796e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.13.16","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.13.17","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.4","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.46.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"acc52f6a246e03c9f618db309ac07e60abde796e","_id":"react-image@0.0.0-acc52f6a246e03c9f618db309ac07e60abde796e","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-Yk2tghZTW9GN7sSFVOxfK3lWi80qxI+M1p1pWzr3zGZNIxlBtpcdRRgXKcU9rxp1yS0voUti0ip/hpQckpWuBg==","shasum":"39e57118851811ef6b7491a7c60752fa2bcae16a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-acc52f6a246e03c9f618db309ac07e60abde796e.tgz","fileCount":20,"unpackedSize":38169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi9v0CRA9TVsSAnZWagAAY68P/RMkR+VSRWXkftDiqR0u\nOHW+E21Z50IZfqtr/24lteKKXGSzPVyWLew5sWyLFrpDWGlRfMtM3gc+9FOh\n2XXFV42BIItj+YpgdiSawu19UMagKGGTDW80oFg8izjULqVgyF8+f/9yD+XT\nBbu9kktsDM4kKbcKhEGtY/AupLiMnaBLJ2cYskvwP8IdBZChJr6sm2JjhFOw\nwwOdOIl+8Bsou8xBhoJ/YrsGJUpOCDK/wKeXQzQ72XFwqB8mKf6/cX+dFzLW\nKBOfMZ++vyHOpssSrRgZ4lDUfuMLJHt9B++2nvumlIQnPlYfEIuO+ZgveTEX\n7vjRDiHvh+SF7/bBrZlqd2AH6f/V8j34uG2un5bFyN4B1N8xxWbkLNsVYX13\n1ZwOlrHDlHcxG8NSI4M8JhfTaCsglGfZ2USTNeEPG0AbyMK/v+pJt4lhAROu\nXHC146I2POa8x9WyBKVTiYUyQDXunBQYzPP2izP4nB28Vv1Vw5D2zTrFloG0\nMv87g+NddSBL3jYR7xy5NS1hsapXPksqhVN8i6jg+iosW4PjwXi2jx0EwY+u\nTAbNTQlRmr4t2oZ329THgTR0B1Ag6z6Cf3PIrc5akyJrTvJ5m6a3Gh/FRx1K\nYaiMmw/0JE85cOGI/jF7hGsIh748OuCF02tXnUTTuAmS6KOOZ8WDWentDrSk\ntifU\r\n=+3ER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrvUiSzJP2RU5Fj2+AJN3AERBxcCreXbVfe+UgnSG3fAIgO0f4UciXiPeuPEMZexWkwAEyHaEEltAQq6MTzdkx/es="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-acc52f6a246e03c9f618db309ac07e60abde796e_1619778547778_0.569167657473916"},"_hasShrinkwrap":false},"0.0.0-d8a9ecd751ee1a6d5e881ad206cd12526a55aae0":{"name":"react-image","version":"0.0.0-d8a9ecd751ee1a6d5e881ad206cd12526a55aae0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.14.0","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.14.0","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.4","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.1","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.46.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d8a9ecd751ee1a6d5e881ad206cd12526a55aae0","_id":"react-image@0.0.0-d8a9ecd751ee1a6d5e881ad206cd12526a55aae0","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-r1SLVDT7nLDL/3Lj9zOSUwxJnqObE5mUJ0PpKvgXdKGQo9yBPbyvIsciNEifghD9bLyYEae94juWaUxG3iul2g==","shasum":"79cbb833a5d72780fab8b2cb6aa2d02c1fea1a17","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d8a9ecd751ee1a6d5e881ad206cd12526a55aae0.tgz","fileCount":20,"unpackedSize":38174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjXijCRA9TVsSAnZWagAApnQP/iropOQxJ8KoGFa7LGej\n35dKdRo5LJtzxYMmIFt1d4vlLukTf9ROQHJJICi162VGBxfL2WDWyPaAm0zt\nofWhAUEgC3ApQyfRcfuutcYWF3frnB8LWPkvarpSNYIUB0qrYczOsOH6xXvH\nQhtgpZW+JVpXuYhxL2+9Gr80Zt+vAXRf+MpEDN9mjs8ngNQKS3EonDjDBonG\nZqgBtHIU/9jZxBTiDzxfKBUwo+4qa1gn9Bch9Oawhh4C2PrXzck/UP+zy7VX\nMUPW6cacNWyoYtQ3O5/TudRo3jicyi23/4c2srqlm+LreTTDAbt4R9c5RcuQ\n4cNuAxzwFjjM+CUWnXSk7/GgnHiPgcAMHqCpormz5nHUZzpzT9VOC0PX7FU1\n5dQYyiT0V3In3Np6BoiEK6iPJSPsBgZaFA2xt/AnOFTE5phXDuwFfAueQ6no\nsDM1T7cXTBazMBUcJYSQSRBR3BOGNiRRksfDk5uMTzhYpC4rrUgaNIF3d9jM\n49qwsxEi36mOXysKc0IYPmZjRBNvymwy1jRbIapRvu5tGGYcVfaXl7T3IgQu\nnKOP1yUwSBHAyZPJKLi2vF7WVTW1a5r2Z+XwcUUW6Of8bduSDfInAMHafA9X\n75ytFeyo4bqjS5Dh7bvrYoJxukobMWtyHVU98BUQ9NqYeHgGogtVWuQN3QMH\nPJ0h\r\n=3JBP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS1C73SiCWmIfcpCRxdXx/ozxETwRR5fGrLbekxSyMcAIhAJYPII0GmQyyWBI4PDJJ3lmcNB0D+JXTOH1ElBKb2fuJ"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d8a9ecd751ee1a6d5e881ad206cd12526a55aae0_1619884195069_0.22045471450805265"},"_hasShrinkwrap":false},"0.0.0-a202f5800ac77112eefd5321aab1039039546743":{"name":"react-image","version":"0.0.0-a202f5800ac77112eefd5321aab1039039546743","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.14.0","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.14.0","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.4","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.2","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.46.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a202f5800ac77112eefd5321aab1039039546743","_id":"react-image@0.0.0-a202f5800ac77112eefd5321aab1039039546743","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-xo7fTGPzZjSLtRTpmpFqZlmNC/5Q1769A7S8HqslCqEMdDNlcT+T3As1cz8ia/jtEl/jOhgM1T+Qe5lh8c0xBA==","shasum":"e130cb36293593fccd6a849c482fd584280dbf98","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a202f5800ac77112eefd5321aab1039039546743.tgz","fileCount":20,"unpackedSize":38174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkc9wCRA9TVsSAnZWagAATngP/3XjiUfPR+RJsd4cUa6B\n21XcHebPzl2V6wDk3zK5rdvvINEDmRZrcV2QiMyGYejW5rz9hULU2/DpiXpb\n0pbpVetZqQKB85aIKr7OijdOMb/+NI3L8UzaDb5OPDFy0CFtnj15QgZSJCOc\nDSOJRbPG7tRSdjx5/SvN3OTsYpbxuUt1YZ4lWxyFovQWg5A5iCuwSRR6bRaa\nF4n4cfEQM2RcDkvAwrJ66ge3TTEEl3CY+lonLD1K5BfZPJClftRg2K+YLmwj\n4KxsMtsKrB6JT6UqJjL2+vbiTvSeqPm/FMx8z7n5B1unceHQLTDpcSi3TBSz\nabLeQoNa3+OoAREfEcDQwKgPELJAevhy6otHguA95oYzedRe8Jcv9+S9/lF0\ng9WXHN3wZFPoqE7pDBA5UA+I5aE1x3PNvb14RiRZB/OZ55Pm1b1Rc2lNFGyl\nzaejPDRdmuxNZKMnDTsGS5be9AExwSqvWWKYnVQAXTBg027NaJ0qEumZOLkL\nFFPM+GvgdtavAHt3C3CQiJ8sqAd2ufa3zq+nRvtbZIsyxrlDRZfuZrQUeuNQ\nPqG6Di2GZPnBqKXh340qQiVi9axq9fSawW7DKJ9jRLRAqVKLP0Af7F8MKegX\nVUHKC4UUgwfTeF2sug9S09UvKHNdos+P60/NJ8hO3oFUUISnH0cz8nmx14vJ\nn2cO\r\n=vcKB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCszbcUGkbVzXr+la+icJq0Kf9B43kn4R28OkxOK9y6MwIgTYokS6rhKmPOQQzOjyp/bCILnbKssb6T/gy2TdRYYbw="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a202f5800ac77112eefd5321aab1039039546743_1620168560147_0.029596660105227546"},"_hasShrinkwrap":false},"0.0.0-d8fdf058598d47c58fe26b0fe50ba603e0278c60":{"name":"react-image","version":"0.0.0-d8fdf058598d47c58fe26b0fe50ba603e0278c60","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.14.1","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.14.0","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.4","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.2","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.46.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d8fdf058598d47c58fe26b0fe50ba603e0278c60","_id":"react-image@0.0.0-d8fdf058598d47c58fe26b0fe50ba603e0278c60","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-ARARmpYlAVj5n7ofw3vQ55c0pR/JVQpnXtyDUHkuShkgPsh018rCb1LGxq0GhTzigTozuHEr2fsmsp9wDqox2Q==","shasum":"e6a4f0f60f992942be5e932276c0c64f39c21dbb","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d8fdf058598d47c58fe26b0fe50ba603e0278c60.tgz","fileCount":20,"unpackedSize":38174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk0ZMCRA9TVsSAnZWagAA9ScP/iK9l4Mhbia9B+LHzo9k\n4QMqjFvvpg+CZNCwV/1gcu/TCiUBKh01EoLci+NM1g0lzm3+S3sCsfn3FOxJ\nQVJlMjOKAODrAKUPbFj00N+Tl9DlUy9k47T8ln4Qdb2TmqY8b1NYj/K9uzv0\noXSa87C/LG/+lD7srakdJBBEIHoiALRUSQcNaWtZnDh2pYQo3qE2BIDZJIbU\nnnFUXt6cqbqfoJv7h5xziNim38ODSukVFyM7dHyEecuHtK9KfSJoYk97c9VV\nuF4bNnD3O4oqIW4i7WZYt9sk36FaaCtwlZ7VAHsnq0ptWAEq02UEdUpQYPrY\nlmOyvtbP7ShaCjA/49TbSt+Q72DZcz40q9YUDICWfCh98jYKuHmIhEghWSgN\n7F4BRV7PJ1fuEaPW/rJVH4v7WADnK+9RHD/d9ZGbqPbIv97OdRqYins4EYan\ndZrEDwd3roWLgltu7PD0B/EPqPAWeuSUvsGqZ2z3l63/5OdxkPnese6n01/n\nEaoUn8ODgdwNZnt39YMS4UocgnkJJIo/pNpF/fEQPOiaZQbkbydzjo/9622T\nxi6LQpxfqAjEKSK5YlF+dy+Yy51vP6Y1gzExZNKPWRcLRPQORawCzuWs75sw\nrF7KaudxtWDRXjg6qAlF146RMq+L2rsmEjn3x1jJNXtDZzWwrIJnKrQtKRKX\nPjTQ\r\n=LaRT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEl65Zv9kGnAeY+0JdBHKkeylEcs0QpeM3F14/2Z0Ha5AiALMgUVEE0LK5Vtr8Nn7R7bVoyn68YziIsbdtQZxPFWNg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d8fdf058598d47c58fe26b0fe50ba603e0278c60_1620264523528_0.7640343908069269"},"_hasShrinkwrap":false},"0.0.0-194d5c9190a6b9fa9910885969b811029cd5b2a2":{"name":"react-image","version":"0.0.0-194d5c9190a6b9fa9910885969b811029cd5b2a2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.14.1","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.14.0","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.5","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.2","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.46.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"194d5c9190a6b9fa9910885969b811029cd5b2a2","_id":"react-image@0.0.0-194d5c9190a6b9fa9910885969b811029cd5b2a2","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-/dJbHAePYgJYaRJvdrJuT56rzO7ag5dmfwtbSSU25lmyn46jIibHeJ/gS5KJnhOCacZj/l0uXpJxpLmZNJq9Wg==","shasum":"4690b942a77cda4cf3bed3e8d03e98f9c4228948","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-194d5c9190a6b9fa9910885969b811029cd5b2a2.tgz","fileCount":20,"unpackedSize":38174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk1qlCRA9TVsSAnZWagAAoLYP/i27DBo11MgqqfBCyoD5\nl+bVAGWHH+P6H6Pcwmv/+lbUAs5RY38U4D4Li+shuDWXLi3MDXThULFwk+Vx\n4hklDwsWzJiGi3KBoENW5kl6LVR9o3MeJ6XcaDx6hVoJLQynoOx46cyzU/e4\nSUnNGlF+iYMjWYdIQ8ewHDcvPiek7qmVhRDRGN9aDMR3mbhBIXD3O6970mnZ\n1hNLuVtYinXIJH9USf1hMPYMPKFYIYwMjUz/leZVoLX6CGlxneP48WC77sSN\n/pxsve3WCODBEHjeHzFoP9Yv8cIzHjzuekN8ndRevYlcNmipkskwfT4gkCOW\nQXm0xkwdh1mie4XPU8eiTzwON0hCiVs8z3PzmcQEUzTSbMyiTEFTYUqaB7nP\nQW9lraQgTUBfx6Nw4q07W1aLXp/YcOE4fPkEYI8JlGeAXtCrrxPrmyCu60n0\n6A1yTEbNh65f3R5vBKavrmZE273C8VlHl5grWbZw6hz6wmC0pZUSNckB77c7\nYmpmrJ7AMdCA/ulGFHqfb1ExwOZoaOnnAecuNF5ZZCBzg9FCnlfv1T/r0m1v\nf39g38Xsm2jgbUrzkv7bTfBlWzfRe7Zg41vty1/D45V7wtx+/B9S/eLVDJTK\nslYyUFmiKPpxAFKTqnfbph5NiHb9hQzJwWhxOMPn2uj5UJb15Qf8srkMRTM0\nQfJW\r\n=SO7/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAOSNIe9VGYtB1VfTP5YIyOiOE8nN9K/xiBY864uQyLQIhAK0Zd5CHRMB2y8lk3Bt0kKqWSRnvZRgTDJBSS3LaDODq"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-194d5c9190a6b9fa9910885969b811029cd5b2a2_1620269732575_0.6959694558720984"},"_hasShrinkwrap":false},"0.0.0-9a61f9f3d36eee4ecddb89ad975e795b5245dd7d":{"name":"react-image","version":"0.0.0-9a61f9f3d36eee4ecddb89ad975e795b5245dd7d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.14.1","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.14.0","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.5","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.2","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.47.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.5","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9a61f9f3d36eee4ecddb89ad975e795b5245dd7d","_id":"react-image@0.0.0-9a61f9f3d36eee4ecddb89ad975e795b5245dd7d","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-2//rDZkyBwWLL4Mot2zxg3JJ8P36KqQjRpnR5SOGw9z+SW+ujUTLeBJ4LlV2+Kr87DbnyJ0txgYodNgFt2Ak7Q==","shasum":"3b3164ca0122f328e323180ad470d8a1dbf0a07e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9a61f9f3d36eee4ecddb89ad975e795b5245dd7d.tgz","fileCount":20,"unpackedSize":38174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglPM+CRA9TVsSAnZWagAAoZ4P/jp3bQ58l2tBZiro75Rk\nN6hHBrbwBu7K3zxyyNHiMemEw/N1ksiNz2h5Y4RyEeHGTBd4CduYqC1Za/NJ\na0B72wi3vLK13wG9FJTZMGVJu1c2AXF7qDC1Wp7d831IAYgklpKrPTGO7SLd\nsep9WA3jFp4DsOWp9MVJoKAs1jbBUvXY6gdu8Wh1Aj/hJTzGY1ve9XtBVoU2\nXScp2WiGwpCl626heof0lFxLei7jnsiXFhx/lNd/2aQ/ndfhFyNZjV9tdIak\n4jxlsQXmH9Yiv5WpjWFrF0oVBGdnYS3WGNo2cQYJxAogm3iClOaOJNhkyMeb\nsbxAni6g+O7ElUxYDG45jCqX6fepvWm6NItTcDvpl4ruSnumqUvJIgfEMaXk\n3b6PTFohQ7ljVSG0fJKtqnJFNpABH4OKLA049zkHQGtt/powh+sKIIP7cGVl\nHMNcFSRNtacl8WBXhIQ20oeUpQd7v+uhmBO13SQRWuToN5v49B6mGMYABDjv\nPRlRkDNhuYxbRPZfWBWgF1tAoRSM/tMoBDeltBde4oz4wcPRZMwmU8O4fZLC\nfL+6TEmo6rUD0cWYzBazTkckjiWkas/bCpMTrtyPjXiIOf8Am54q2oLDiz1U\nMlmr5OICvJlpOAbCnUGh47Shwrn7yErmerTuPpqcOE+WYiML68wpADiG1z9+\nn2Jb\r\n=ifRS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC40C2uRthTcvNe0az/h+TfsSqVGUbb7a6Jvrh/JJ1gRAIhAIgYmD1ajIJBnHrN5r09A2H/zKa/zt+tJPwY11JsitBH"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9a61f9f3d36eee4ecddb89ad975e795b5245dd7d_1620374334105_0.1363283909073254"},"_hasShrinkwrap":false},"0.0.0-edb954817768f5280dc71e290d17503d182859c7":{"name":"react-image","version":"0.0.0-edb954817768f5280dc71e290d17503d182859c7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.14.1","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.14.0","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.5","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.2","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.47.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.6","ts-loader":"9.1.1","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"edb954817768f5280dc71e290d17503d182859c7","_id":"react-image@0.0.0-edb954817768f5280dc71e290d17503d182859c7","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-a9WlZt5earkfUZUp7Ef+dHpQkR5xjv7yhIU9r8zS+jQf3hxddZfjSMUiNH3bJi5Lf+oFp6UChzaTU8njKLHKkQ==","shasum":"66ed1a05232d24b1c4b2e3bbcd035f7f70693701","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-edb954817768f5280dc71e290d17503d182859c7.tgz","fileCount":20,"unpackedSize":38174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglWo4CRA9TVsSAnZWagAA1yYP/jDFOwWNoITt6aWWxaJA\nWpUaCR57wJ2TB/pFk3OACQYKjlUSazDIPj5GtNwB6ncyA/4m3+Iss27Cq9yP\ny23u7VFEccmet2gZvZOLZgqg3hVyNYg5EfMDdEhkV0PpzGi3UoerBzNUYqwU\nHLzxE5rOv8aJc18TQ5nnP807/5jsuWS6Q7nkB9NGZkvuzlK6v8vG2OJFMwgp\nP5AoWpKn3WlQXxlZggyo+PLFnt4rhvCgCmAuQh26vEdZPZHkRo08qavyLD2+\n/+tsi7kkDRBQDqGNnuFGhiBB1itkLf56s4BeEHNfN3kgKkBTwNurrPFmp4+n\n8QWpbmzc7f1ImkT0ggfJ8zDJaRhbbaBWex7cNw0Z2ZXqzfH8ja7Z1foiLuDg\nwnRq25m5/P/F8IhvFRaSiHMZ2iEX8zDgU51iln/D22Nu8cPDJCJlKfdeUIz0\n8Pzfe+/13cjyn+S9XmVyZEBmFHCWnMPsooqersPXD/m+RWC9Q4iIqpNW+uzk\niJOY1IBD+jXrzk3tG+iELrUlnRQ123u5jXDtD4qsYQhyUoKV7pTjab7q3yb3\nz52cGdandSnH4/X+PAR4tggm8BSr535rQOII0+tmWZ1PhXkWsh/Uj19S89BT\ncnVAp/I//1a5TiGcMTtANaNK3nKoQENnw4nUKfLsj2Zn5MFpZ417abRR2OEH\naa2c\r\n=mSJ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuQRmZjqYHie1yivCvoaS8bmAPj9otrs06Nkd/jvr7/AiEA0mMK4vJ24CzJNJj7uE9vPzEqNsO8ti6+0lutZ3kCd/Y="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-edb954817768f5280dc71e290d17503d182859c7_1620404792449_0.7386416774914206"},"_hasShrinkwrap":false},"0.0.0-4e87104d2b61049831a11a4ab2433517add85a23":{"name":"react-image","version":"0.0.0-4e87104d2b61049831a11a4ab2433517add85a23","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.14.1","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.14.0","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.5","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.2","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.47.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.6","ts-loader":"9.1.2","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.6.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4e87104d2b61049831a11a4ab2433517add85a23","_id":"react-image@0.0.0-4e87104d2b61049831a11a4ab2433517add85a23","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-eqpxLR3U0Lg1ukBvuJdpr15sCdPUWFGoXjD8w9b5P3uB8ppo6zAtEJKby8M+VP7gStEK8ix0mDR/LP80SCpKNA==","shasum":"55aa9e6bc69dd5c74d5934dc32384de0ce434d08","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4e87104d2b61049831a11a4ab2433517add85a23.tgz","fileCount":20,"unpackedSize":38174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgltSxCRA9TVsSAnZWagAAuhUQAItziwmoC/yqAk18HxCJ\n6k/ABHMgeBGx9W+ad+SIxoTdKITyYm2jcPCOlQNdfrpRhfxxfDAW+Qg2FqXy\nvnHNWSphYB5TMATydHGXZdSLpx1SPU85fUEmTH59cQ5gs06jxIGsPgBTiSSS\nsEaXWoS0unAFjSSuJ+23F/1xGxdncgQhDqIQC4RQeQ4YEt55hF+SYjwBWWbl\nFGhe1OuYBM1PZytb3HvzYdu0U1ixuws2ygNcC/Ukbb2kozTG+UTryMnijlIz\nfpBUPz6DHZGCMFMHIFxwhzod1PlL6jTV3sqmuIUNDuWZyZkrhOyiptqr6iXn\nGTyjRtc/4JG7xlxfN+C1UeC028J/WM8LF5e/DIUvq1Y4rypRMnm/g0e9YHBL\n4S4ngGZvDKcWS6nHxgTQ6RGpppVGHjHnOdDN8wiknnZhS3REnZwxZkuGmjL0\n4wvCeyp0ZFU9uxzyjDSSnxKAH7S32sDWjEp3BY55Gk6f5tXcFXxj6ssr9g+H\nfIFyFF37ucj1kHPoYGJCJcBIv4YXN/5hO6H0iUF3AmiztW25dVy4aAmHx2Io\n/sSxMGEux77rf2zqbwzXs7fMYdCyRG/M+tsiCo2SN/8q4Cvyq/0MmJhvI0hE\ngHs0dhVsX2eaiGCTv/fY9yTiiY7t7WGN1Vfdql/vlz4/0DmpWfu9ArTOGprY\n0+G+\r\n=d5UM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjT0gQvHw1kdW/7YdUFiMxDLg/O4s7nqCXsxtFE65ETAiBBkh8sJNkS8oKjGc+TVOPdXoPHF09kOt8OshQOy6sOPg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4e87104d2b61049831a11a4ab2433517add85a23_1620497584726_0.4180785161800986"},"_hasShrinkwrap":false},"0.0.0-ccf71c02fa65d13b962e30848b03c304b4c6ea7c":{"name":"react-image","version":"0.0.0-ccf71c02fa65d13b962e30848b03c304b4c6ea7c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-object-rest-spread":"7.13.8","@babel/plugin-transform-runtime":"7.13.15","@babel/preset-env":"7.14.1","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@babel/runtime":"7.14.0","@testing-library/react":"11.2.6","@types/jest":"26.0.23","@types/react":"17.0.5","@types/react-dom":"17.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"26.6.3","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.2","commander":"7.2.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.6","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"26.6.3","prettier":"2.2.1","react":"17.0.1","react-addons-test-utils":"15.6.2","react-css-transition-replace":"4.0.4","react-dom":"17.0.1","rollup":"2.47.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"26.5.6","ts-loader":"9.1.2","typescript":"4.2.4","uglifyjs-webpack-plugin":"2.2.0","webpack":"5.19.0","webpack-cli":"4.7.0","webpack-dev-server":"3.11.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ccf71c02fa65d13b962e30848b03c304b4c6ea7c","_id":"react-image@0.0.0-ccf71c02fa65d13b962e30848b03c304b4c6ea7c","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-NyOul/b8fwvnXdwQ8y8IxKpe+lmybNonxRXjbX33rusyBhpXS4Ag90i8w1Ad7PHIyqDb16ezCxOoIaiiwvanDQ==","shasum":"a3b040776ecea11a662a8363c1707936cd31fbcd","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ccf71c02fa65d13b962e30848b03c304b4c6ea7c.tgz","fileCount":20,"unpackedSize":38174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgluviCRA9TVsSAnZWagAA7kQP/1nFS9few1MpHNhWSBrs\ncL8UvODJxWC40kwdmlQsVvy+X453vOSrarxaTJQolfo1KU2ASD5Y4M6KZoI8\n6i7HJZTCGgWeacmky6U8P4Gx0HC1FADDaFKAEOWtb0uuTwNurnnCcNhKHLww\npmaF3TJ/Jh9kEsR4ksxQb7LG/MYGGTUc5yDoSWQvu6uUno1rgPL6iJI5EhhB\nq4EUhkdgBMo+2gr6nA/JrePlU/ZsG+D1NiobXmzGUEy4gO4EAiQwTP7UxIrd\ne5r4gPfx1gVP8sCutNQgZ+rDYvFNzy4tYfgI5SZlQehxEH0iGzzJ5UnDur2L\nuF50Ov2/XR5UvAVXHZ67M46J2zFA3CVrwjKxTHYtks4UfU3OqOoq3iLbd5a2\n+kup2y+Lxi9azGMtKoEpckf9KeCPCIPfG5TI3ExuLDCfrdRIFMtF62v3EF8O\npVXcn1VvCwAKl1uxJbsvUJE6z7SarJ8Pi5pFQxzwjYbgn63E5W9awC2q6LsN\nLspsJj82hi/DWMPpAtYpOTeCsf1ZCiriK+P5fsIti/oVlfirCITFzDe2NmVv\nZVjfDOF3eN3kRnnJVeS0NBWgFzexJQSYI8V/k35c+4mBhW9pP0ph8rCb/WBK\n6GntsOC8dKRpLMZOAgL9KyzxXA3zi3YLukeydIZ/HwmB8B9AA+l+I/bKJcRe\nJFyX\r\n=CFvq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOxoCFwSn0kjt1Xj0OTjSrd05CSasVOpMyaPYYL5nlGQIgZN2JfJlROA/yZ1pydpcMqXNvf4jR++bFk9v1GcvUwiA="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ccf71c02fa65d13b962e30848b03c304b4c6ea7c_1620503522167_0.8284570071600581"},"_hasShrinkwrap":false},"0.0.0-455a733b3611f3b05d771be41160a3c84fad846b":{"name":"react-image","version":"0.0.0-455a733b3611f3b05d771be41160a3c84fad846b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.5","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.0","@babel/preset-env":"7.15.6","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.1","@types/jest":"26.0.24","@types/react":"17.0.26","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.1","react-css-transition-replace":"4.0.5","react-dom":"17.0.1","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.4","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.19.0","webpack-cli":"4.8.0","webpack-dev-server":"4.3.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"455a733b3611f3b05d771be41160a3c84fad846b","_id":"react-image@0.0.0-455a733b3611f3b05d771be41160a3c84fad846b","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-BhzktejbiV+GFZlFb4rv8hdC5POKyKRKDe+s7SQAqY7gk2dZZ5mOoGS9szqhv96FPJJsmiSXu3DmmDCy7TcZug==","shasum":"242bbd11abf55933d816e65cdc9b62fc4dbbfa43","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-455a733b3611f3b05d771be41160a3c84fad846b.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGnP+b5Nf3+CUCuXUoMeVj1IaweXHC7s+V0Dxd7DYzNwIhALI1xDJJHKSqwoUzh4RtVsCDR+s7cW6Tgho/mjIEu2XO"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-455a733b3611f3b05d771be41160a3c84fad846b_1633280205404_0.45151030946579085"},"_hasShrinkwrap":false},"0.0.0-fc0e568c021718b56906d85a6518128ad3baf86d":{"name":"react-image","version":"0.0.0-fc0e568c021718b56906d85a6518128ad3baf86d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.5","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.0","@babel/preset-env":"7.15.6","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.1","@types/jest":"26.0.24","@types/react":"17.0.26","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.4","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.19.0","webpack-cli":"4.8.0","webpack-dev-server":"4.3.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fc0e568c021718b56906d85a6518128ad3baf86d","_id":"react-image@0.0.0-fc0e568c021718b56906d85a6518128ad3baf86d","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-wgdMVY1NEUb+TRPCXtKs6SyP25ZyyETnhP4arpj6XQq71Ivx6FAcTN3SSzp6X9YXni2Se3QpSIvoAXlYdGgdvw==","shasum":"bf1435d3530d0c1cacc5d97aa54bd5c615646668","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fc0e568c021718b56906d85a6518128ad3baf86d.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUI0ROx9ehV2dGfcL5sZwJ0hraHjs5UaFd11vmcRuitAiEA39GLEe6gTXAvf2WIqf2B2wVG46j5yA/d1gIMyOqa9PU="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fc0e568c021718b56906d85a6518128ad3baf86d_1633280840973_0.8326886741382351"},"_hasShrinkwrap":false},"0.0.0-54e701c3feca1ee6f257cfde82913ec8a4b83704":{"name":"react-image","version":"0.0.0-54e701c3feca1ee6f257cfde82913ec8a4b83704","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.5","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.0","@babel/preset-env":"7.15.6","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.1","@types/jest":"26.0.24","@types/react":"17.0.26","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"4.5.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.4","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.56.0","webpack-cli":"4.8.0","webpack-dev-server":"4.3.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"54e701c3feca1ee6f257cfde82913ec8a4b83704","_id":"react-image@0.0.0-54e701c3feca1ee6f257cfde82913ec8a4b83704","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-nTLPUOjf+b5fkJwM4mQ/EYrQMiqHMctH3l+LxDq1lLZVHJalTXSQ2upSntAO4T2RWt0rdO2X3nkJaLbfJITjUQ==","shasum":"05319d038e58fa786f1ff3fba53b7edf6933a51c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-54e701c3feca1ee6f257cfde82913ec8a4b83704.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/eVnu5NyOEg5KegmY0d9a5j7i+S+cDw9yNvtauup+rAiBwc1v9DBPg2MPsWhcY2oxiGFSmE3MOl35IFR1nXe0VjQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-54e701c3feca1ee6f257cfde82913ec8a4b83704_1633280896869_0.32137627145572756"},"_hasShrinkwrap":false},"0.0.0-f69abbaccfc32632547bf9fe3a705038dc66db56":{"name":"react-image","version":"0.0.0-f69abbaccfc32632547bf9fe3a705038dc66db56","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.5","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.0","@babel/preset-env":"7.15.6","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.1","@types/jest":"26.0.24","@types/react":"17.0.26","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.4","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.56.0","webpack-cli":"4.8.0","webpack-dev-server":"4.3.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f69abbaccfc32632547bf9fe3a705038dc66db56","_id":"react-image@0.0.0-f69abbaccfc32632547bf9fe3a705038dc66db56","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-W2j0aJFWR9FGYwn1sxCcvkHhGCNA6mlGvHKKY1SPfQeUUt5BdAnQ9AZP207QJfdyghbrzJeaoVmoE6w7ii0/Eg==","shasum":"14cf2b095149cd4f87cb31a6e4a119a34d5cefcd","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f69abbaccfc32632547bf9fe3a705038dc66db56.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClIcBaMrvBKRFWlEIdf3wV36nKCEYCRX4EBsOVhdneuAIhAOFriBWfV7EjkpuPLJ1LItOdCCQsXfxJpLb7KXOZsqKA"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f69abbaccfc32632547bf9fe3a705038dc66db56_1633281610940_0.0644504386910767"},"_hasShrinkwrap":false},"0.0.0-2a13c181ac0b3f4914053c4fdb01e6dbce584917":{"name":"react-image","version":"0.0.0-2a13c181ac0b3f4914053c4fdb01e6dbce584917","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.5","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.0","@babel/preset-env":"7.15.6","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.27","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.56.0","webpack-cli":"4.8.0","webpack-dev-server":"4.3.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2a13c181ac0b3f4914053c4fdb01e6dbce584917","_id":"react-image@0.0.0-2a13c181ac0b3f4914053c4fdb01e6dbce584917","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-HbQFNgBXVA5/5Bzaf1bkB4aVIrv45jK7Xrqi9J0LcpUKUxPT11zW1YE59NmwBkTt9NlcNdlENgj3Ha+IRnfJPA==","shasum":"c7bbf7bcd2f6c920d8ca80b0dfd880d82b2b4e5c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2a13c181ac0b3f4914053c4fdb01e6dbce584917.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqQk/RQZMPcwcqxfjR9wtRTRYantKObWMy7tjP+xSToAiEAmApBPFKL0N5pfDGn9+SrjYkXAvzX2//SNlOCbDjUpYM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2a13c181ac0b3f4914053c4fdb01e6dbce584917_1633283029225_0.7433724221197833"},"_hasShrinkwrap":false},"0.0.0-a076e2de0b6d2c7d24d6e707b123c45ae54ccad7":{"name":"react-image","version":"0.0.0-a076e2de0b6d2c7d24d6e707b123c45ae54ccad7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.5","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.0","@babel/preset-env":"7.15.6","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.27","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.56.1","webpack-cli":"4.8.0","webpack-dev-server":"4.3.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a076e2de0b6d2c7d24d6e707b123c45ae54ccad7","_id":"react-image@0.0.0-a076e2de0b6d2c7d24d6e707b123c45ae54ccad7","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-qNWTXof7cLg0ZYUQyi9UC51xwy8XpbmWBHGG0+7O5oxfSmrY5t4X6nLsScl5PWRb5D+eaw4qKCTOZWk9jttMjg==","shasum":"f706cabed5eea4a05c62f0fb74eac63909b0ee9c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a076e2de0b6d2c7d24d6e707b123c45ae54ccad7.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAT3USNjJIEFdSsoyl3T+VhjBqd9Ynr9SP0EAQXvi1rkAiB5L2TBgyKLY3s1tQwzUTukJ0tZDyJnw3Jm2Gc+uAuumw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a076e2de0b6d2c7d24d6e707b123c45ae54ccad7_1633427564416_0.34682208392975333"},"_hasShrinkwrap":false},"0.0.0-149e3793a8461c8b40fa7363223844385f8f229c":{"name":"react-image","version":"0.0.0-149e3793a8461c8b40fa7363223844385f8f229c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.5","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.0","@babel/preset-env":"7.15.6","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.27","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.56.1","webpack-cli":"4.8.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"149e3793a8461c8b40fa7363223844385f8f229c","_id":"react-image@0.0.0-149e3793a8461c8b40fa7363223844385f8f229c","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-lx0nqbBItPDSr9WeGlERdF87X00Sp8r2K2/catfGZbWQoKtEd8He6xUVn2UjxyAuq/4BPIs96RJXUbUt39MkVg==","shasum":"1a2bd87e0b3ada00e558cf08bc7bf31e59bc3098","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-149e3793a8461c8b40fa7363223844385f8f229c.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0FYo68gMs5faccj5YKx6W0I7COyj27sqrA+EmPr+gWAIgXOTPhlaL4I2IVS8+qHUevh7eZB2gShX4OTAPxu2xbTM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-149e3793a8461c8b40fa7363223844385f8f229c_1633523822134_0.06640607175155377"},"_hasShrinkwrap":false},"0.0.0-6f8f7b2cd0cc0a871787c3f72b0b6830981a6464":{"name":"react-image","version":"0.0.0-6f8f7b2cd0cc0a871787c3f72b0b6830981a6464","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.5","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.0","@babel/preset-env":"7.15.6","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.27","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.57.1","webpack-cli":"4.8.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6f8f7b2cd0cc0a871787c3f72b0b6830981a6464","_id":"react-image@0.0.0-6f8f7b2cd0cc0a871787c3f72b0b6830981a6464","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-7c51Ns9L8kOn5yLGS0zceVNtArWRf5Vp3bmVFIgkEUfQ1WhdAYyiDNCsFQX3Fm6UsayjbKXpNLwtSt3hflh6Tw==","shasum":"abc6a503853fc0c063b4360d4d80d1d5c7134a04","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6f8f7b2cd0cc0a871787c3f72b0b6830981a6464.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICudhzQhyu8qS0JQmZ+9jKdGHUpKCHfN7feVDwwxpNIIAiEAphVtQwOIh7AmW7tQqtKsLwJyjPvS+C/EgnJExeTME1Q="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6f8f7b2cd0cc0a871787c3f72b0b6830981a6464_1633618063062_0.8240878840578325"},"_hasShrinkwrap":false},"0.0.0-63d13ca5c0559113635d460c7cde926d48f125cd":{"name":"react-image","version":"0.0.0-63d13ca5c0559113635d460c7cde926d48f125cd","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.27","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.57.1","webpack-cli":"4.8.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"63d13ca5c0559113635d460c7cde926d48f125cd","_id":"react-image@0.0.0-63d13ca5c0559113635d460c7cde926d48f125cd","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-2BjYJPEBOsK8D4lv9t3fdPZaa5lpN9VmRZb0eZLS22bzUCLI0C0QFEGtUHvsjN8jZJoCfqy5UW42OZsRo50MeQ==","shasum":"4125da578b95eab997fb5a7e1c052b36447a5154","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-63d13ca5c0559113635d460c7cde926d48f125cd.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBxViejmtSa2ib7BNHZUaWKBZStCKp+Z3oHW53TDMapAiBer/hazRMYbmyikdQx1fKlO5xbgOWRTA6u3VCsOAaZRw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-63d13ca5c0559113635d460c7cde926d48f125cd_1633717172303_0.6820924480045372"},"_hasShrinkwrap":false},"0.0.0-e6e82b97a6bb75f7ebb5405619eb42a7fe0fd358":{"name":"react-image","version":"0.0.0-e6e82b97a6bb75f7ebb5405619eb42a7fe0fd358","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.27","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.4","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.4","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.57.1","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e6e82b97a6bb75f7ebb5405619eb42a7fe0fd358","_id":"react-image@0.0.0-e6e82b97a6bb75f7ebb5405619eb42a7fe0fd358","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-DXCvhQSAMFV5SbWDPyKz8lgdPxejUQEBOMb6h7qHmBu7sXQ2Acv6/ZnH14YyWDQEtiROmmandayZwhp6EJmqRw==","shasum":"e7c15203494d7738224d0842ef121c2f02d5c897","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e6e82b97a6bb75f7ebb5405619eb42a7fe0fd358.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID8V0GqS0To7gCizpEobO85UoSqik7K+svR2UwgvjHeyAiB0Xu/OqisOYD4rqsoivV+p3N951zMsE5Qhi+2iZPV7uw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e6e82b97a6bb75f7ebb5405619eb42a7fe0fd358_1633717307773_0.9880720310636935"},"_hasShrinkwrap":false},"0.0.0-5ba78812df99999ed5273209069ee72f4b020068":{"name":"react-image","version":"0.0.0-5ba78812df99999ed5273209069ee72f4b020068","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.27","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.57.1","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5ba78812df99999ed5273209069ee72f4b020068","_id":"react-image@0.0.0-5ba78812df99999ed5273209069ee72f4b020068","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-FUPZlPxFT9nShChN5Xpqs0Sx0ewt5uw/y6ll3DLrzSrErakHo4KPBzFaaukSh1uGOx0o5pP8mBq9sc5MsqFAnA==","shasum":"589c8e33e1199eadc82afb896c41b70a381a9d7d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5ba78812df99999ed5273209069ee72f4b020068.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUM1hutDEPsYBJ5NO02Uq3D2J09UHPOf5YQcd0VOSEEwIgf6+Ug4ptqxMjf8+woLXQ3IGouBSe45ekpDrK/XMk2xw="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5ba78812df99999ed5273209069ee72f4b020068_1633812184546_0.05896611619311076"},"_hasShrinkwrap":false},"0.0.0-e92f6787f614c516484fa7bf7e36242675a092c5":{"name":"react-image","version":"0.0.0-e92f6787f614c516484fa7bf7e36242675a092c5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.27","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.58.1","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e92f6787f614c516484fa7bf7e36242675a092c5","_id":"react-image@0.0.0-e92f6787f614c516484fa7bf7e36242675a092c5","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-L4G5b2H2d/h7vvxrFP7t7n8wvkksP10B4rRBqVe8ZtrPSOXD2zVUrv80mwNMzOZV8lrAvqgL0bCjY5OQY9fbXQ==","shasum":"be8a4bc9b7017d6287a41ff975b6a0b17d3aff9c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e92f6787f614c516484fa7bf7e36242675a092c5.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+6wzXxtcRfX4E8pzUs4vWzr1u3u6lJCBs+4bkAivdnQIhAOfr7VCsWkj5Fh4kp1+bDNOYeE1tPFHwSELcEzfxsJp8"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e92f6787f614c516484fa7bf7e36242675a092c5_1633817556135_0.10616625625931753"},"_hasShrinkwrap":false},"0.0.0-8a2f5c4ea6829c0e5b91579e70e1c069943fdf58":{"name":"react-image","version":"0.0.0-8a2f5c4ea6829c0e5b91579e70e1c069943fdf58","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.29","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.3","webpack":"5.58.1","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8a2f5c4ea6829c0e5b91579e70e1c069943fdf58","_id":"react-image@0.0.0-8a2f5c4ea6829c0e5b91579e70e1c069943fdf58","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-6hv7zOdrJxaDiZiH8PfvH8L280UE9fA5djWrryHjN16V9dx/tqGPY7pgqGJ8xO+ZQOYhjyAEMWVxS9pzYIp/Mw==","shasum":"58bdc85121758d493b9981809f3d8def66ddd1ec","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8a2f5c4ea6829c0e5b91579e70e1c069943fdf58.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMZP6Ra4SsaEJjcb4EJYlRE6my6xIevG3o/qVvUA2lmQIhANaII1xtMz9sZsxKTN4QC1at7zEqEeERuwJ20+jc2ZsZ"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8a2f5c4ea6829c0e5b91579e70e1c069943fdf58_1634158414324_0.4391310516996352"},"_hasShrinkwrap":false},"0.0.0-a89ec601f266d8c357d214e768021b4b588847ee":{"name":"react-image","version":"0.0.0-a89ec601f266d8c357d214e768021b4b588847ee","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.29","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.1","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a89ec601f266d8c357d214e768021b4b588847ee","_id":"react-image@0.0.0-a89ec601f266d8c357d214e768021b4b588847ee","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-EQyRJ3lbxZUvJgeHOnLd3r6jiwpl9pitEXW/jLlaEPnwfkODksczFM28x7DzB0jSrlx5cDWPtL5oAFxRKQzb7g==","shasum":"581f2a94cfa965740e04081449520ea7c3ae2496","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a89ec601f266d8c357d214e768021b4b588847ee.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEi4w48FONY3PLgD/JDc0YMDNtINYGXHwCnmwSBoqDeZAiEA/Z0w+QD9lI8wkazt0wbxJ/B+BFTw0Y5L/fgNefBbvJU="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a89ec601f266d8c357d214e768021b4b588847ee_1634262231365_0.24472643817007333"},"_hasShrinkwrap":false},"0.0.0-4d28ff8f03505fbe38e1786492ed699b22e046f2":{"name":"react-image","version":"0.0.0-4d28ff8f03505fbe38e1786492ed699b22e046f2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.29","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4d28ff8f03505fbe38e1786492ed699b22e046f2","_id":"react-image@0.0.0-4d28ff8f03505fbe38e1786492ed699b22e046f2","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-nLAVPDu0h0Xj79dNxMjjYJXPrFYE5ijb0qpcSoogbVD2FVpBpl/nIFNMU4bjolfR6trcoKRACDsXhufgip3kag==","shasum":"4303392323119444f548002590b7b9bd48db2091","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4d28ff8f03505fbe38e1786492ed699b22e046f2.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBETNNPGeYRQQQ3vLxSCG4Pnd6oM/8sNu5SyMMMizd0cAiA0JmXiCkVHRqjxPVYK4COpBIXRBP1esHnOFqWGpmP/Vw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4d28ff8f03505fbe38e1786492ed699b22e046f2_1634262396689_0.5046772345517891"},"_hasShrinkwrap":false},"0.0.0-908ba7104ba5c3dd84700ab81177ed9351d08c19":{"name":"react-image","version":"0.0.0-908ba7104ba5c3dd84700ab81177ed9351d08c19","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.30","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.5","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"908ba7104ba5c3dd84700ab81177ed9351d08c19","_id":"react-image@0.0.0-908ba7104ba5c3dd84700ab81177ed9351d08c19","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-0RPbuwmOB5vV2jMYL3/pP4Qp2yysorOI1x/xdIP4xcZsXhhLpqTCngrxeVYxPvgVzEJQpO956D6FOoReyJ0sPA==","shasum":"0e2a553631c66eb8e45e49ac6b8327799753f311","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-908ba7104ba5c3dd84700ab81177ed9351d08c19.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOWB7FETz9aBxtaGGGKdIQH3uu8+rzCvwwILY2rDKE3AiEAqpPhy+GB1diJXb3y9BGON6fg0vkmufKp8j/bT43thjo="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-908ba7104ba5c3dd84700ab81177ed9351d08c19_1634359382691_0.18522135384647664"},"_hasShrinkwrap":false},"0.0.0-cd31973f19b425b2c10a3e6c0cfcc51e21abac2b":{"name":"react-image","version":"0.0.0-cd31973f19b425b2c10a3e6c0cfcc51e21abac2b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.30","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.3.2","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.6","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cd31973f19b425b2c10a3e6c0cfcc51e21abac2b","_id":"react-image@0.0.0-cd31973f19b425b2c10a3e6c0cfcc51e21abac2b","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-I9UxJ4xzuABpnJJW5yG2P+b0ZC/wtcfDOjwj3N8KKSAYIEO/Beq5cUHu+uWbuQBHYXk+9RDbE99V3afG+0iAog==","shasum":"45b505facbc15de48050d754c0d05cf832e50e03","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cd31973f19b425b2c10a3e6c0cfcc51e21abac2b.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTl1QvstjCANkF4HlSNZpZhNRXzx8JWrdsfYY0pK/g6AIhAP6Vm4KEF53UGi4tI1zCZEs/Fvrnem0GSNZev/DC35kw"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cd31973f19b425b2c10a3e6c0cfcc51e21abac2b_1634359485579_0.5546590322321148"},"_hasShrinkwrap":false},"0.0.0-307c1627754ff1df7e27bbe217a5a659e9dbe644":{"name":"react-image","version":"0.0.0-307c1627754ff1df7e27bbe217a5a659e9dbe644","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.30","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.6","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"307c1627754ff1df7e27bbe217a5a659e9dbe644","_id":"react-image@0.0.0-307c1627754ff1df7e27bbe217a5a659e9dbe644","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-A+FPG4lpY3t9qlmkSinnM8JW5Wwhc8QsST/ndHHP9cYyyvS1JByqGznN1eH6TzLXQaRo5Dabqu4d/ggBwTLpWQ==","shasum":"26a5de01b1e5096dff2eeb254c59a06965a7a315","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-307c1627754ff1df7e27bbe217a5a659e9dbe644.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX4XlD+yQj2+zv5rOcMQMlbMc9h7GtrgYjv42N+jYblwIgQaKSNd8h+9CjNqaKcooJ/Y3NYEmZGYKuW04h7KdIQ4w="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-307c1627754ff1df7e27bbe217a5a659e9dbe644_1634452443702_0.21866910009686924"},"_hasShrinkwrap":false},"0.0.0-d228d6eab3eb56b130d2c967db34bc6209832dfd":{"name":"react-image","version":"0.0.0-d228d6eab3eb56b130d2c967db34bc6209832dfd","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.30","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.0","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d228d6eab3eb56b130d2c967db34bc6209832dfd","_id":"react-image@0.0.0-d228d6eab3eb56b130d2c967db34bc6209832dfd","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-iwxV02pDioylh960MK0nFuU9ZSgQzN+v8tFxm2rUfvGmMlTWR6/H0AAVUyxOq9h7Xpnw1mbcTmAsMgV6wo5kfw==","shasum":"75f09b7a71d4554c3bdf37466727d64a9ab4d0a2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d228d6eab3eb56b130d2c967db34bc6209832dfd.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhv4Fmwv/5/Dp+HTbxclAJ5BiZsQoHOJiMah0ob+Gu2AiEA2phZROWFeL63AYEPQp7QcUqwEFBXhnOz1a2/KwuIgss="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d228d6eab3eb56b130d2c967db34bc6209832dfd_1634548787376_0.674925731580116"},"_hasShrinkwrap":false},"0.0.0-59f81757e6d6f0ae23b41267de32786b76848786":{"name":"react-image","version":"0.0.0-59f81757e6d6f0ae23b41267de32786b76848786","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.30","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.2.5","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.2.5","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"59f81757e6d6f0ae23b41267de32786b76848786","_id":"react-image@0.0.0-59f81757e6d6f0ae23b41267de32786b76848786","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-hQq2Wqvc/BcSJ/6omsLL2YzR1MxNwpoqh7Hidd6Q05tFuDTlI/SQUhui6+UkmGbS4Ne1PfwSxAC1dqQAgHZFHg==","shasum":"2b071d845cfa967800de746108427d25a23927c9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-59f81757e6d6f0ae23b41267de32786b76848786.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvKrrBdDCR+40YzXEK4tz1f75hJojjI44RptZbtJaUoAiB5YAgHa9DUNDuLs7aWxGan7FKUhEFgBkXKnV98cySpfg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-59f81757e6d6f0ae23b41267de32786b76848786_1634656302501_0.7897530027303943"},"_hasShrinkwrap":false},"0.0.0-9423a4a57689eaa83c9e16d7079171c98c843fd5":{"name":"react-image","version":"0.0.0-9423a4a57689eaa83c9e16d7079171c98c843fd5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.30","@types/react-dom":"17.0.9","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9423a4a57689eaa83c9e16d7079171c98c843fd5","_id":"react-image@0.0.0-9423a4a57689eaa83c9e16d7079171c98c843fd5","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-MAS3JudRkNhbckksycmX5q18LoPMrNZ5uTcuAMfAUhLxkpFiwFY+K6noRf10tomYKSjD+5TsMtY2EHZoM1a6FA==","shasum":"532d732608aaf1bad25696342f7533e4ec99ced3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9423a4a57689eaa83c9e16d7079171c98c843fd5.tgz","fileCount":20,"unpackedSize":40569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJ4bsFI6J/JCmMPxws6xwNtkt/Gv+xwFq65Y0Ow273vAIhAKYbDjxJPf+MUD50Fo6mvAfmvQhSx+u72/aRmdhFJWh0"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9423a4a57689eaa83c9e16d7079171c98c843fd5_1634753386772_0.2907079595416855"},"_hasShrinkwrap":false},"0.0.0-5e5803a701ed617e1bb3401a3f3c319152175064":{"name":"react-image","version":"0.0.0-5e5803a701ed617e1bb3401a3f3c319152175064","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.30","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5e5803a701ed617e1bb3401a3f3c319152175064","_id":"react-image@0.0.0-5e5803a701ed617e1bb3401a3f3c319152175064","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-0VnT3Tfn/oYSN8hP3DQ9tm4CTJyCBJwxzYkaGlItYRa2a2uKnNQA42B4hs5RiPDNqHBbBz2nJow3ycNgt9O4Jg==","shasum":"e4749777482accb40805ebce0e325e005399f5c8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5e5803a701ed617e1bb3401a3f3c319152175064.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAXKAFWBZOWYIDarsv035E4OzmfARboxiCK3lp1+6e3eAiAQGhyEsgHjVZ+m/ZSBqjZhfYBgN83n9NXZik1tPzXGLA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5e5803a701ed617e1bb3401a3f3c319152175064_1634846626241_0.5705507253983393"},"_hasShrinkwrap":false},"0.0.0-8773ccf330b13829188c70416b0a3620f6b06169":{"name":"react-image","version":"0.0.0-8773ccf330b13829188c70416b0a3620f6b06169","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.31","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.2","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8773ccf330b13829188c70416b0a3620f6b06169","_id":"react-image@0.0.0-8773ccf330b13829188c70416b0a3620f6b06169","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-fsvJ3klDear9OZM0+biV9ARMZJZjI/jYBwCoR+eXv69pOBb3MzX8l5+YmZTM28pu8/F5XWWVUzE17O1QVsMm2w==","shasum":"4e4bcc64a68596d251321680e13afa9616aa3492","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8773ccf330b13829188c70416b0a3620f6b06169.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJLIPQQQDMGEkZNGCYHG02bABJlrXepTxPtvCYROEFyAiB9dn6+XH2SzgNYzsBjCc8i47rzQ0AyxOrW0GTsmxo5uA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8773ccf330b13829188c70416b0a3620f6b06169_1634940566164_0.2652849838036664"},"_hasShrinkwrap":false},"0.0.0-7da42b1be3db2a9840dbc73c86e69e4b7499716f":{"name":"react-image","version":"0.0.0-7da42b1be3db2a9840dbc73c86e69e4b7499716f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.31","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.2.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7da42b1be3db2a9840dbc73c86e69e4b7499716f","_id":"react-image@0.0.0-7da42b1be3db2a9840dbc73c86e69e4b7499716f","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Vc5XcY9B2N7axwJb+MUPZC3XJRziwwEyI83prG91LjMszLcstjjF5Ga5Eg88WKiJehe4ljXxDqU7UijBg3v+zg==","shasum":"245f862cddd06cbbac366484f952a78b0d3f8e48","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7da42b1be3db2a9840dbc73c86e69e4b7499716f.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfHBl+aWK1MDnbwii1/cls6fQdKcgFRNUys6UsTefBngIhAN2K+3mRI7Mf8wYPq0Twh8V4PXXNiHTf/PwnoUIiHtII"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7da42b1be3db2a9840dbc73c86e69e4b7499716f_1634940714319_0.6829953525224217"},"_hasShrinkwrap":false},"0.0.0-c35186414e7871cc9b668ab046076c3d3aedff30":{"name":"react-image","version":"0.0.0-c35186414e7871cc9b668ab046076c3d3aedff30","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.31","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.58.2","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c35186414e7871cc9b668ab046076c3d3aedff30","_id":"react-image@0.0.0-c35186414e7871cc9b668ab046076c3d3aedff30","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ONplj+XLdfc/L0qMunZ2BF/GK8/kqaChDSnfpz9ccMiAchKFQaSXO017vsSzYHGQGSW/CPvpyWWKHDzjwT58Tg==","shasum":"f165acc06e8e5bb3b6a0b4ea4fd6d17fd9ab9d0b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c35186414e7871cc9b668ab046076c3d3aedff30.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHTLS91aaSW5SAq51Vf3Oa/2AV/LlI/c51HWYv0udElwAiBpeck1eG1GNp22yq5caDNnTNf67iuQtvtFMSnmv2xroQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c35186414e7871cc9b668ab046076c3d3aedff30_1635039237693_0.3631367453038101"},"_hasShrinkwrap":false},"0.0.0-4fbcbf9847b62891c2a718c7482e7217da3aaf1e":{"name":"react-image","version":"0.0.0-4fbcbf9847b62891c2a718c7482e7217da3aaf1e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.31","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.59.1","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4fbcbf9847b62891c2a718c7482e7217da3aaf1e","_id":"react-image@0.0.0-4fbcbf9847b62891c2a718c7482e7217da3aaf1e","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-6Jslg8K0wrna7cfYtpn+yku5Ag3cPv++E/47ycbcXcxylAqgHbyCK5xWJIj52onczTkK5unrp19jYvkdti4cDA==","shasum":"d2d6fdb85783a8fc783dfd257ee363206f9a5a47","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4fbcbf9847b62891c2a718c7482e7217da3aaf1e.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmwPYJ7ttl0cr+lyHOJqPVgiPUma24GFwsEFjAjZ8PGAiEA3j8QnfTrMj+roD3i8+CGGj0eZxnfDDP9VrCR+5EseNc="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4fbcbf9847b62891c2a718c7482e7217da3aaf1e_1635039316487_0.9664442400211402"},"_hasShrinkwrap":false},"0.0.0-f2b456d2b4050aaf895ba650553086540871afa1":{"name":"react-image","version":"0.0.0-f2b456d2b4050aaf895ba650553086540871afa1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.32","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.59.1","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f2b456d2b4050aaf895ba650553086540871afa1","_id":"react-image@0.0.0-f2b456d2b4050aaf895ba650553086540871afa1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-HcNjNLepZn+a2R2CCDbDl63hj7+5RAlRI0mJ3bAJjsX4LxibHARr6ZPiy+qqY3kE/QfNpB69J93GJl20SpJ0LQ==","shasum":"fbfa23e564088b532e698eb562285984d0a88733","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f2b456d2b4050aaf895ba650553086540871afa1.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVf1PfgUi/jxodpVhvAIDpL07hSxo30Se7zL2YPqR4MAIhANAmxEkgPlKFgsoYTCIFlERWxsTPLuYqUPY4s9d/u5Ky"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f2b456d2b4050aaf895ba650553086540871afa1_1635170428791_0.19963221868257608"},"_hasShrinkwrap":false},"0.0.0-0d30198ce0cbdba2e65fd3cff37d0fcbd489b0b9":{"name":"react-image","version":"0.0.0-0d30198ce0cbdba2e65fd3cff37d0fcbd489b0b9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.32","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.4.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.59.1","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0d30198ce0cbdba2e65fd3cff37d0fcbd489b0b9","_id":"react-image@0.0.0-0d30198ce0cbdba2e65fd3cff37d0fcbd489b0b9","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-fNOdFGFkQG2rHyzOHJsxrENeW3BMnKQh0W0fea7n8zq46P0S21MkPtA0aapp0rwSziGNhya1T3YfFL1sVQ3g9g==","shasum":"cb92fa7a6742e345160fb942e0e96baf5889bb4e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0d30198ce0cbdba2e65fd3cff37d0fcbd489b0b9.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmvkRrWs956FgjsbFWLTLwtLppGZBaHpeQTmqnjHKmxwIhAMVnFR08a6HwIRDoER33HrXC3ExIJVW2ydInDGkG3IUf"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0d30198ce0cbdba2e65fd3cff37d0fcbd489b0b9_1635266767724_0.6492546400014185"},"_hasShrinkwrap":false},"0.0.0-e61110ecab7d397f254db3af3c8e48c15bfe0308":{"name":"react-image","version":"0.0.0-e61110ecab7d397f254db3af3c8e48c15bfe0308","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.32","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.59.1","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e61110ecab7d397f254db3af3c8e48c15bfe0308","_id":"react-image@0.0.0-e61110ecab7d397f254db3af3c8e48c15bfe0308","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-0/65deYuO8zf0eswnBFKmtukOM8k6qqSsw198b+S61ai8jNv5j5gtlCnobgkrDZG+NQnlBKuMo9YjFG49+o+Tg==","shasum":"04d3d53f5f06fbc3b10de1d75aa556e119b4c504","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e61110ecab7d397f254db3af3c8e48c15bfe0308.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOU1yYzsQ+3GzExqzjonQ2IE4Ef+xzJAR2f4TBze3sFAiEAvgQgyC8+fNO4GAi3RLI4rQZqWc4BxFux1Lvkh8FLSh8="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e61110ecab7d397f254db3af3c8e48c15bfe0308_1635266912316_0.5325033631352822"},"_hasShrinkwrap":false},"0.0.0-d00541ddabe5c88b79897e82a4ff1014e1ba5fa0":{"name":"react-image","version":"0.0.0-d00541ddabe5c88b79897e82a4ff1014e1ba5fa0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.33","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.59.1","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d00541ddabe5c88b79897e82a4ff1014e1ba5fa0","_id":"react-image@0.0.0-d00541ddabe5c88b79897e82a4ff1014e1ba5fa0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-YED2/s7Ng0J7sMTCRmv+s6KuUDe4sgXOqrKD2wuNPRQ1o4qi32BsgO7urcPi/pEqWfR0KtQPRQFxJ3WdR5pmfQ==","shasum":"0426e175c153fd14d3c0aec2e63c6f02f2939fac","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d00541ddabe5c88b79897e82a4ff1014e1ba5fa0.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAEOo5Nba3+7s+ueZkQgNsjWIAma3e+gmKlvR7vLabzAiBs2RelS6vY9zVyzFJzzA/49vE6+f0AEcZHB5kfeyckkQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d00541ddabe5c88b79897e82a4ff1014e1ba5fa0_1635363406661_0.9162347017604839"},"_hasShrinkwrap":false},"0.0.0-7d17ffb5a0bc7eb1bf13729142fbb0b9994b3e1f":{"name":"react-image","version":"0.0.0-7d17ffb5a0bc7eb1bf13729142fbb0b9994b3e1f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.33","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.60.0","webpack-cli":"4.9.1","webpack-dev-server":"4.3.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7d17ffb5a0bc7eb1bf13729142fbb0b9994b3e1f","_id":"react-image@0.0.0-7d17ffb5a0bc7eb1bf13729142fbb0b9994b3e1f","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-QL3yn4FjVWmrG/uQ8/5ovpFjyl00OCYSKveTf/80s8EhmRKQPTaIy4+RcOWUEODIQET11JjyIIUuwya+baaM3A==","shasum":"882143077a7819d7d809727552e2c4f57c498bb4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7d17ffb5a0bc7eb1bf13729142fbb0b9994b3e1f.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgRpUncULijmfECGfKDpYndikeAuF9K5CJGMlytqbh9wIhAJdU5y54Xjg0vGF0Pt3PNG4/QdNo/lgCImVcrCj1rlFp"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7d17ffb5a0bc7eb1bf13729142fbb0b9994b3e1f_1635363503067_0.23213678820742767"},"_hasShrinkwrap":false},"0.0.0-b3ed090ec4a83f6eeae1291372c0a4467df4b96d":{"name":"react-image","version":"0.0.0-b3ed090ec4a83f6eeae1291372c0a4467df4b96d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.33","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.60.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b3ed090ec4a83f6eeae1291372c0a4467df4b96d","_id":"react-image@0.0.0-b3ed090ec4a83f6eeae1291372c0a4467df4b96d","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tgwjEjWesH//K2Mbh4OMku21naH+Z6SCennKnX+gpMuFLR9H/YTtSEuj5M5tao0rRnsSZdwXEiQCc+2if46R7A==","shasum":"2e83d6e0e69bb1795df589ff26cdcc419efe618e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b3ed090ec4a83f6eeae1291372c0a4467df4b96d.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcDmQejrTpTFSi/VrDW6QNpX5fmOXZYv58Yt9nR9mdXAiEA9kbCEvCdh15oiI5thmUb3eJh0Rs4cfUM9NdS/fPoFM4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b3ed090ec4a83f6eeae1291372c0a4467df4b96d_1635462746582_0.1525215113912326"},"_hasShrinkwrap":false},"0.0.0-e933f0d4eceff140f0106d183c0f15a330efa57a":{"name":"react-image","version":"0.0.0-e933f0d4eceff140f0106d183c0f15a330efa57a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-object-rest-spread":"7.15.6","@babel/plugin-transform-runtime":"7.15.8","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@babel/runtime":"7.15.4","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.33","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.61.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e933f0d4eceff140f0106d183c0f15a330efa57a","_id":"react-image@0.0.0-e933f0d4eceff140f0106d183c0f15a330efa57a","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-29s5J+6gSQtz54yjGuzSzKj/EJqquLZW01Epie054lwpm4SCnuzOzI1fOLdUsvguPtx+FhWHfZdWdpy50QyW/Q==","shasum":"ace510182fb8399a6e83b777a661a9ede902e6dc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e933f0d4eceff140f0106d183c0f15a330efa57a.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDb/Rm4lw2Oko6Ap9L2uUouIV9j9y9Iz006GDOlK7aOCAIhAOHoNNSbwBvh0RopqifFTFBOvoV2YmLJHmkJYg2D5g9N"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e933f0d4eceff140f0106d183c0f15a330efa57a_1635620252944_0.003940125814101192"},"_hasShrinkwrap":false},"0.0.0-c544e4e191c0039b0b92eeb7313a96be29ecce37":{"name":"react-image","version":"0.0.0-c544e4e191c0039b0b92eeb7313a96be29ecce37","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.0","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.33","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.58.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.61.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c544e4e191c0039b0b92eeb7313a96be29ecce37","_id":"react-image@0.0.0-c544e4e191c0039b0b92eeb7313a96be29ecce37","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-pLO8fjYEBMTQpuGSVk8Ql7WT6irc48XdXLto8e9HC+yARvT39dJweqrs3nuVWMmo2i04DvOm9fLbh3RD2Mx3Pg==","shasum":"172734e9e567fc3a1f2e28c8f60ce6f5fa942027","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c544e4e191c0039b0b92eeb7313a96be29ecce37.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRSMBvtSMm1Ln+YWWPA7RA4clTnndMhiwt5vwuMT61KgIhAODxnTR6Xhjw9u2vaXvtwp0ArtSW3Iafqcxo1Ghd3PHq"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c544e4e191c0039b0b92eeb7313a96be29ecce37_1635714010973_0.9011930592712751"},"_hasShrinkwrap":false},"0.0.0-658b34bde88c9efcab3b8da887e85850f89a25c8":{"name":"react-image","version":"0.0.0-658b34bde88c9efcab3b8da887e85850f89a25c8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.0","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.33","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.59.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.61.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"658b34bde88c9efcab3b8da887e85850f89a25c8","_id":"react-image@0.0.0-658b34bde88c9efcab3b8da887e85850f89a25c8","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-cLUmYkKSbKSNaWZ+EwN6LglQitxBjgrbRM+AWsNg9AAAS0TSmTGBgIs3KxbQ7n0M1w42cTBpZvAqPEvRgzu3EA==","shasum":"e8a0889968b45efea117fc9de15b46f0d04c2b7e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-658b34bde88c9efcab3b8da887e85850f89a25c8.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2lxVvXMCULWP57IW6nZOzibIdR0mU2NM3Oslznt0v+QIgd+3HNcczMW8rgAYXpSJdqs0xNRhqjiD24qBK9j/GNv8="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-658b34bde88c9efcab3b8da887e85850f89a25c8_1635853377388_0.2877354678318289"},"_hasShrinkwrap":false},"0.0.0-272401ad5e35d865a4b63df7086548bc1b51ab8c":{"name":"react-image","version":"0.0.0-272401ad5e35d865a4b63df7086548bc1b51ab8c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.0","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.10","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.59.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.61.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"272401ad5e35d865a4b63df7086548bc1b51ab8c","_id":"react-image@0.0.0-272401ad5e35d865a4b63df7086548bc1b51ab8c","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-bCaGmbehAotRo9hxc7DyawbPhtxrae90EWhYKimlCYhJOtym7yQ48AQo4EkG6IsJ0PMQaYHqSMbQEYJ+tw5jyA==","shasum":"b04d13827144039b7e83382927d891a99292a44f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-272401ad5e35d865a4b63df7086548bc1b51ab8c.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuazNLle38juvxqhUGoa3aue3pgaTLJMU07+biIB2b/AiEAkmFyobgATpFKlU3QK/6CC+WF0FVBXWM0aIQaSsAbk2Q="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-272401ad5e35d865a4b63df7086548bc1b51ab8c_1636028979100_0.47690182913514634"},"_hasShrinkwrap":false},"0.0.0-49bef348397431d996ed3b013f1041e22dcea1b0":{"name":"react-image","version":"0.0.0-49bef348397431d996ed3b013f1041e22dcea1b0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.0","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.59.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.61.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"49bef348397431d996ed3b013f1041e22dcea1b0","_id":"react-image@0.0.0-49bef348397431d996ed3b013f1041e22dcea1b0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-nRbnxDvy5MJvWwgLSrJE146ZgEl7/1beWUjb0kErDVARU28x04KYPxavdvmfdry+GNRK64zl7ebeSTeyz2esJw==","shasum":"26ec0dc2ac077bd99bde9cf157cae1fe41a3f336","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-49bef348397431d996ed3b013f1041e22dcea1b0.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqw3WLWthbyLGFdDpQrTgc2vOvxhDMsNRCGpK02OmNtAiAEZen1WQfTuZm9NEEtUUk1efZhqgqgJJPcDkL+yjEYzQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-49bef348397431d996ed3b013f1041e22dcea1b0_1636029047957_0.6866329179714759"},"_hasShrinkwrap":false},"0.0.0-f07e5bf5398f339c4dd6d32904ea1c6fe5d3fab7":{"name":"react-image","version":"0.0.0-f07e5bf5398f339c4dd6d32904ea1c6fe5d3fab7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.0","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.59.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.62.1","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f07e5bf5398f339c4dd6d32904ea1c6fe5d3fab7","_id":"react-image@0.0.0-f07e5bf5398f339c4dd6d32904ea1c6fe5d3fab7","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-DHCGhrgiMm8xQJPhArGIk8ExarGXkuSOaO9o5A6G/159hgvgQPsPgdvsS8xdZihwr1+K9ib9mfXUK3kbYZc8Yg==","shasum":"a025cf23ff18a187fee75ff1b492792b4a56dbf9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f07e5bf5398f339c4dd6d32904ea1c6fe5d3fab7.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3zaiPznzqMbiCfGAkraZoFq9TlhQBvR8liotkaX3jvAiEA/pSw/1rgBKokaO+rsPDcS6CCFxFAq83VyZPXmnR7sXo="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f07e5bf5398f339c4dd6d32904ea1c6fe5d3fab7_1636228670632_0.35329161090784744"},"_hasShrinkwrap":false},"0.0.0-a540ba32b75e064f07d8fae0145ee18289627986":{"name":"react-image","version":"0.0.0-a540ba32b75e064f07d8fae0145ee18289627986","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.59.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.62.1","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a540ba32b75e064f07d8fae0145ee18289627986","_id":"react-image@0.0.0-a540ba32b75e064f07d8fae0145ee18289627986","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-JksMAMHmfIiOiKquF1IjWIyv6a9G4jJW3w+lfaKLhM20fLNcMnkpHaRUYRmuppzVPHpSsiWIMgUL9olaMdsAZQ==","shasum":"c4fab533c894ac1acda8a7b49c25e2cac04d2a12","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a540ba32b75e064f07d8fae0145ee18289627986.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOwZS/r9Ce3gWeFnG9Hx2+WbSaSsT2H1STiDH0fqp1tQIhAJvZA1v1k7pk5uaZpUz8HDOeVSM/iiyO5rjHyaXTV5CJ"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a540ba32b75e064f07d8fae0145ee18289627986_1636596000790_0.27153782316638986"},"_hasShrinkwrap":false},"0.0.0-f3ae591acb92d7cfee1ebdae3b69fdb828b8688f":{"name":"react-image","version":"0.0.0-f3ae591acb92d7cfee1ebdae3b69fdb828b8688f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.59.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.63.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f3ae591acb92d7cfee1ebdae3b69fdb828b8688f","_id":"react-image@0.0.0-f3ae591acb92d7cfee1ebdae3b69fdb828b8688f","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-4RPObY4W03S/p4SYVKUz2P+kcAA+2ZoTqTpZ+BtiPLjGOFV8cV1f+0kwjVdIaqkH26refGjomJkAFx1wO9JTAg==","shasum":"dce5ceb3e9bf4e7f6cf0754e2afec541df5a0a60","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f3ae591acb92d7cfee1ebdae3b69fdb828b8688f.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7PNuK0cCOVE9FTmgue0KPRj33m8ZvopyxyGm+/IJ1/AiACzglR+HRdPKIcOVhahWMOdHUSFCApvQ5rHNNxiCRhOA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f3ae591acb92d7cfee1ebdae3b69fdb828b8688f_1636596126698_0.7820660328746569"},"_hasShrinkwrap":false},"0.0.0-fc4191ce89ff7e51f4470a68f31f78071a169a93":{"name":"react-image","version":"0.0.0-fc4191ce89ff7e51f4470a68f31f78071a169a93","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.59.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.64.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fc4191ce89ff7e51f4470a68f31f78071a169a93","_id":"react-image@0.0.0-fc4191ce89ff7e51f4470a68f31f78071a169a93","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Xtczq7PGugT6tFYvY4xCV07E0NS9AK9FaJecToUumM6ygEkmuXC7RV4yzncZ+A379i6VMjukLyn0zMT1A3F2OQ==","shasum":"0a91f8c5466f11d8d9bfc5a57d8c5c9b6fe9d00f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fc4191ce89ff7e51f4470a68f31f78071a169a93.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQQ2hduOeDoBL57FBDLWqS6ukkmy7Knfb6gfLlwXSSAQIgax73AAFWoN08PiEifSV2H6PZsaWqW1elN4CFeD+VUxQ="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fc4191ce89ff7e51f4470a68f31f78071a169a93_1636744054928_0.4790181110584275"},"_hasShrinkwrap":false},"0.0.0-4428aa5c621554b3b8168131c092754f943d54e9":{"name":"react-image","version":"0.0.0-4428aa5c621554b3b8168131c092754f943d54e9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.64.0","webpack-cli":"4.9.1","webpack-dev-server":"4.4.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4428aa5c621554b3b8168131c092754f943d54e9","_id":"react-image@0.0.0-4428aa5c621554b3b8168131c092754f943d54e9","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-37l12WLcwQ3FIuCEVs3gLXpJZ+Q7J+re5nzjqniz3k9t4GbU2sU4Xwaf/Mwd9LSTEgnIt20uHCSqUVXiHMdxSA==","shasum":"4b46a343957a929c4aa77fb91c0f2c4f7230174c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4428aa5c621554b3b8168131c092754f943d54e9.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv+VA8CrQe3JTe5/JIW5qYFSkKoXCIhKyR1stOV5mOawIgKgR7eWCrop+svdeSyerEn6har0WzGfjmUgwfX0lkne0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4428aa5c621554b3b8168131c092754f943d54e9_1636843157307_0.2841414069948589"},"_hasShrinkwrap":false},"0.0.0-03cb7cbb8f8a0c1a8a260ef6246cccc4eda91f84":{"name":"react-image","version":"0.0.0-03cb7cbb8f8a0c1a8a260ef6246cccc4eda91f84","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.64.0","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"03cb7cbb8f8a0c1a8a260ef6246cccc4eda91f84","_id":"react-image@0.0.0-03cb7cbb8f8a0c1a8a260ef6246cccc4eda91f84","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-labhTkLCa2l4kXrm8enrt31mQwq2So/DkvR8khiGkTJjKz6uDeqHm5N/P3QEpFl/VybhfDhh1xe2DLSHqHeGAw==","shasum":"a0e265e59244ebe3bf1f6a7bbccab8a0c7774318","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-03cb7cbb8f8a0c1a8a260ef6246cccc4eda91f84.tgz","fileCount":20,"unpackedSize":40570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcbkZbhgxKeQ8F5sqJjc6Wnqe76kj5BvbSTN1nqIR1OAiB5E02x6TC0XiftdRcW3zWZvwWVUReYUpLGiztk2/xRFQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-03cb7cbb8f8a0c1a8a260ef6246cccc4eda91f84_1636947490626_0.4485058264720956"},"_hasShrinkwrap":false},"0.0.0-3cd579f43cee6c6937b1155118a6f3f627333e63":{"name":"react-image","version":"0.0.0-3cd579f43cee6c6937b1155118a6f3f627333e63","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.34","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.64.1","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3cd579f43cee6c6937b1155118a6f3f627333e63","_id":"react-image@0.0.0-3cd579f43cee6c6937b1155118a6f3f627333e63","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-9In6Zc7WcAX36exDXoJYC0NnwEuCr7DnTVekcP7uOA0Duyw+rDOG2+TTDiIr8Ji8II8bm2VU/PNVDtBwU/AEqw==","shasum":"75b1f11eea805bcd7e9421a7290c6f6aa6c1c43f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3cd579f43cee6c6937b1155118a6f3f627333e63.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlCCECRA9TVsSAnZWagAAfd0QAIAQySwdiX55grw25skY\nUq/CJx8CWbkfy3Ej3rTLlbLqvgGpnFGugCFySPWXPKWE4EaYpncvQZz8zC0c\nTXRz4Jh7Jksi0hoDEtMqXS5U8Gfd/G5S5iesChUUD8725inFPe3tIKPvo9pN\nl4i4eVgyxeO+lwJNKjU+G/KNVsr70U/i95jeXHBN0V2nBh4q588jJJpNuyY/\nkOiC43zTbmfNXGYMgdqx0Pzsz+QIJgYbVjhI/dw4t7j/acg/5J/WiUAePqJR\nvV8gz7JbvW/jYz39eJwLtXfd5WPxE4/3V5dXzUJk0hTH4RKPwwTSvpVrHVIB\nkRvYqzpOyH2pRIg0cfTvf4lFgJdcpqAxmiin3+nfGF3cgF4uFZsAC5d2KiLW\n6xwt1XRUhy6y7RnLyR2RcLZQ1IHFlUns4w1dAuT4K/AFiGVvR1u9smyg9SIE\nOxx7Bx8fKqOowuJcK4qYjNs7oOaN54e/tkb18cF8QFx1X80097c8an9xFav0\nXOlIRrtiUrSfnG5fE5OBNji6+u/RSmpXE2JtR7qInffdHcKpsC3GwhV+lRLg\nBtlTQU+c6LUQSZDZHhUCtcMP9RL0CO27T8GjsISVt0b6/xFxMOxX7EXAcxSA\nbhiIE5Owq2xeNisSoOHIOyUWd5cHT4P+1bYX1fxt9hq29B1Q7m1T2aW/wFFS\nLbVb\r\n=GP8L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHCmpkYoonQQ0TW/JqTJ6pw/Hb7bwzSnCVEguDffwD5AiBNBwZaAcfj2AkqnoyNwhBXUNGwgib8uOT0E12UlVLkTw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3cd579f43cee6c6937b1155118a6f3f627333e63_1637097604370_0.2001083135273365"},"_hasShrinkwrap":false},"0.0.0-37e136188ed10af9db7bd4d1874465bc103b1887":{"name":"react-image","version":"0.0.0-37e136188ed10af9db7bd4d1874465bc103b1887","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.35","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.64.1","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"37e136188ed10af9db7bd4d1874465bc103b1887","_id":"react-image@0.0.0-37e136188ed10af9db7bd4d1874465bc103b1887","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ofNgDz5xTg9IIWPrkdB7AJedgZC87/Yfpj9KWOOUhVmiHXh9zwMpM1+NO8nUjznVxGt4AlJEvhkPc8KnZO4LVA==","shasum":"2d42c1a45084fc6006b80015845223b6ff004214","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-37e136188ed10af9db7bd4d1874465bc103b1887.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlbcwCRA9TVsSAnZWagAAyAkQAJ7GW8OfE66eKTjsXS5o\nJl7erCriY7hB6wnMaUEfYJCLr+bLLn0t8ckRnk+EKHBp0QTFRR9jt+wal+cz\nMLrhjI41WkHxqf9eAZiihJsSGhzT+5A4Knx9M8RW14kaYetzlJOHNJzZ0Kb0\nvDHampAw0LKY8RKDHfpxhaVSpYT0cWlD1awdPWgcKosk0ncri1f6J2gfQxmn\nY06/ltNSettxJySf3djYq/LzwFEwl69iRLG0/NNraF2c+WjLdTkUR+O6gIMu\nslgDrJmdQ9dsfju1pTmbWNRSIG8zws/MXq4/rFGnr3jCKPNnb9vhNrUcikv0\ntts6LsksPXuGWksi7lA0a+4Qc8ifU3uUq1U5QaSOvvanL14Z8iMOoS5csZxO\nvO8Vl2vE+uQDbKZ2Et91u9OV6/PQ0las4SmWYd4yTEq/bn6s3IEGQ8AZResl\nFS0wUsnmgPq2B+ezip11MaZE3pigBm45m56sd/go3mrRaV6HGqKGWKQz8YP7\nV+M6kwOVZdxiw8oEZDkHmdHfjnQIhnkyNHHAlnHFp6IsY8p6crf2akZSdhvU\nklwqRWk/wY089ybsTp5UeUX/EKUI32l1sGuRwj7PxiRjCiPs6Vl4RbErqdYf\ng3UwzrrJsmuWX4PV5ELdHHLJhIK6RlamAQ5HB0Gx1rmmq4E6JZQp6ETG8wzx\nbXPZ\r\n=deTO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXZ0QH6zfDPs3YHWrkY2eoxLUvmh29vAY0JisBgG7ISAiEAzCn5MvyEYlDq1kvOMBOzKt/mOdNA/efYRpLkeEV4d3M="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-37e136188ed10af9db7bd4d1874465bc103b1887_1637201712643_0.32274708633902893"},"_hasShrinkwrap":false},"0.0.0-499014cf0d33602e40d53726e228bdeb9a77ac14":{"name":"react-image","version":"0.0.0-499014cf0d33602e40d53726e228bdeb9a77ac14","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.35","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.4.4","webpack":"5.64.1","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"499014cf0d33602e40d53726e228bdeb9a77ac14","_id":"react-image@0.0.0-499014cf0d33602e40d53726e228bdeb9a77ac14","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-HmDUDd9VFmHqAbdlHijXrRPPdGnQoXyif99e4YPdAF47ZX27BWac/lHp4gMmZ1necJ5DeTmSFubvaaT4Rb80KQ==","shasum":"64da48936c39fe28d8338554349dc2f9397ad594","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-499014cf0d33602e40d53726e228bdeb9a77ac14.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlbfBCRA9TVsSAnZWagAAX7QP/RnlYvGxKRlixAOxWISw\nuEmTlfycCJL+Sd/9NbA28AYgaW1qB7syM2F3pUkdCqQzmI3jlBKmIkuelWGg\nocO2pMolrMSDnN8OiwS/40dYG/WtowrjjwBG0ivbA+ZEIihE09VNsaJue8wZ\nc57D59Z1zgdT+K3vwmmBx0TKb1NdBFcjWp4lcvU5beBpphvM5Al6zkplzWlx\nb46sDw2wFrIyggTQA5AMOxlOU8ow/Yz9WBiWSAqUVjwiBApBX68H9DLsD/kd\np+AYRxf841eWmf8UBxlzkVHZKLn/pjxHGWwoz7eSssLvZAawsm4RSQz4ipau\nnaDt83EZz/pqkcf6+EZdZZ7x9OTskeE4iWRMGc+NmpDy93JpU+L7JqDnlFJx\nayzbi6bs+wfM938gbXv7VpvqXyOa5TFzzfKjUWSobYGSjs+26OwSARE5jWr+\nItN8wWWT+hSnkbXNt0B3UBGGtN8bfARdAZP2srUZpuSigSTRsZaq2OjNeLK/\ng3R9hiqUfseu7S336Eqj/CZQI8TxXaLOZwNQpxO5pbCb/hSx2kkIWAr15YYo\nBCJ7nayQQZ9hdspczgJCXj0O1XPpCM6yLYMwSgkRBtrJplGsx6z7i0gYstAU\n1BY52fyC4Px6Eh9T1PoIQ2+1cWEGWL0auWfYUG7tf4/jVNZNpJ6A8yn8gqCo\n8+4/\r\n=C3Uf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAn4hCjh2mhntXviA4xezPnPFJvsm0kxR0q9X6RMXS/nAiAkBotaTt3zDExLi2D3FwSS7MqEOgUafoS5deQ1tHwctg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-499014cf0d33602e40d53726e228bdeb9a77ac14_1637201856808_0.883168327422708"},"_hasShrinkwrap":false},"0.0.0-51b9d64a84cdc97224db44fd989285856bf685fb":{"name":"react-image","version":"0.0.0-51b9d64a84cdc97224db44fd989285856bf685fb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.2","@types/react":"17.0.35","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.1","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"51b9d64a84cdc97224db44fd989285856bf685fb","_id":"react-image@0.0.0-51b9d64a84cdc97224db44fd989285856bf685fb","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Ws7VZOenrUjBDyC7bAl+awO/FbxFMiWEC65Zp/Oot/MZTN/c6YciHYZWlqda225cTO4obFuIR0fNz+jqOnUQZQ==","shasum":"70f814438d762b6033a9a347c1ba70ccb5ed8be9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-51b9d64a84cdc97224db44fd989285856bf685fb.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl1QiCRA9TVsSAnZWagAAHnIP+wRnab0FQE0KQOAk73lK\ng5aDxI4G7gpfcHQLZbR5kQDM+VByKxrK1AhrD/s04JfQ/JLLF9n81LxYuLJm\nd2kHn9xR5VVBIZwzbKXUTgyI2go08xbm8Jq96E6T1mKta5U1tdXWi5U163FS\nGsG7LKRIipgCee7HHkX2OJwXRM5LvRJYYzHd5vNRNmMBqEpNI2sfRzVZyeMl\n3rRVB5VyXAssTBWo2Nbu3u3XGO11zp8c8DuDZyIjVkNwF4Womb9MZNcTjCe0\n4WfY1Tm2BRl4F9kYhE9Ze3q72YDN/+kwATP6uGJWs6uh87Sqs+fi6wlgJEAS\nTCsAjKk5q6iVSoCDhp+KTQiHGhGeHQt3wRrOiZCe8RNO6MsALbhipr7NoCPE\nPGRS44SNQ2YYxqCdK/uBAh6xbVPY/fQCRV0Do6NjxBgg5ZBoLOTjII/BMR2K\ne/zfDe7YOByGJzJ0wXFyCwegbdEC/o/gQAt2EbXn+KSBCv8pFMnHV/Zk9vwP\n811xn+11VT09mZucH+RjMoOBEv42Ag/w6E0U4k1JhKmz8vwEBUPKW8G0u6rx\nMC47rgmiTIKzcjX5F9HeQxXGgfHmUxQPfWWv5dKQjKnQruXt1CIA0u5FGh42\ntTZtyqLFFCqKt0gJB00oVqyFbdTO6wp7yye3dVrIbesL/Uo1k7Du0QDN6TGP\nax3d\r\n=FuoV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkfXRmUvAI82CR2gD5YRv1y/XdQM2F5TTV6A8iMoDmsgIhAOP7Bx4VcBYPTwiG2N1INIvCMzjeg4tmNdBVvJOp3d9p"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-51b9d64a84cdc97224db44fd989285856bf685fb_1637307426117_0.08179429234140656"},"_hasShrinkwrap":false},"0.0.0-b0839e572b551e1e98c3835dd3aae9eca5fe73e5":{"name":"react-image","version":"0.0.0-b0839e572b551e1e98c3835dd3aae9eca5fe73e5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.35","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.1","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b0839e572b551e1e98c3835dd3aae9eca5fe73e5","_id":"react-image@0.0.0-b0839e572b551e1e98c3835dd3aae9eca5fe73e5","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-6C2a6iZj4kLy/tsDz91MkwOMcEKPRaebI8hFTB8a/goVyHmx4PkZ0OEHA2kL5QixCrp39ff0tTZ91JZZ+R8d9Q==","shasum":"e84228ee9e2b443bc623b9b9316501c917a0f7d0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b0839e572b551e1e98c3835dd3aae9eca5fe73e5.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmNahCRA9TVsSAnZWagAA3JUP/RdIGa4/EWSP93XyO3SW\ns9PNW6rOlD5ObDJ6p2aercHfx/vkrPR0s1NscwujBsHhOlZRd9pVcOfaTxII\nMy4IGbxmhMD85DJpiVtr5smHQHApzFwStqRot0cgAyReV4meRgWI1lfPZCcS\na8xFfR5wIO9DNK6IYHfq8NEu7sUjpf2nvvunjdV/kfeS/GZu7j/dAnc/238E\ne4RH20eA+RobhojHkare51XSYYGgvDmQRWu+B+ykr9rJbFURcIFXYjAPJZFd\npplS9ac+go0RWxtkkOFJIAt54f9Hzfca8rXg5hs2RWVbc+xsyHSKMw6ZFil+\nPNo9kimX4P7OYDIQmGENOfrEGINPzO9RlR1gQ0OZliV1x692D0j+pBvvxj8S\nxtl8511e1NLYVd4FMxG9JuRQA4euThcc5vKDYHm3CO4Yx+tCB7lb6pTgt3D9\nZDaWbvHEmfIffFTicpxrHlbgxTVEOsNPyHSfRA4igQkAUsM4HYggtYTAN6m0\nATSsvtd0humzOBd5FGlzbrpIWoo/yOR4cF4kEDlQtBKVYU6LY2S2P4qpeuFK\nAzdk0Pk77W+KXU5UFchYmm842aoiVLpgn1YLEawKUkOnrCQLOL617KwYoD55\nixGxQoh0wNSYjXmceTTPRZtHBHZDNhUWghosaJVfbQQdhplmT0yO0rph2OHW\nZLHb\r\n=xCoM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMvqz/zP5La1aBldd9fh30JUEdoMtT3pYdUmAkWU5D2AiAfabXNoOzXldZ8QrA4Dp2uk/RMZH0YDam3Q+r023Jx6w=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b0839e572b551e1e98c3835dd3aae9eca5fe73e5_1637406369123_0.8197215959786892"},"_hasShrinkwrap":false},"0.0.0-4cbf08274d8b2b543747bb51881219a12d7cb657":{"name":"react-image","version":"0.0.0-4cbf08274d8b2b543747bb51881219a12d7cb657","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.35","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.2","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4cbf08274d8b2b543747bb51881219a12d7cb657","_id":"react-image@0.0.0-4cbf08274d8b2b543747bb51881219a12d7cb657","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-I+BdOI40nnasrd2mXJsdLt1O5YjyHAs0WtxSZggc5sAkuVKoY5O4Yj0hm50JblicLciCp2iLbhEIcYb8Wj+jZQ==","shasum":"fe6a07177f69217f2f12cce7df287fad062001b9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4cbf08274d8b2b543747bb51881219a12d7cb657.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmqlYCRA9TVsSAnZWagAAxWwP/jACZe8/zSQ/bEDMGwtk\nKsR4YBFaxZYD+PIJAODBdRgws9/RA3F9ahKmSAoi413f1z4rKNxWZKHIOiOi\n24TP5xlvXrQ6uAmMSBBOgwNhupTvaWJSIfkvw2KU40jwItPzlL/sDgV2TMr9\nBvcU5hBR9Ds4xJKveMioG0k6TXHAx0UeN/7DVgGIEFMHPy4QW40BFg8caP+y\nTEPJkyp4gg4PYUGuzyGF5os+bs4FsOU/hJ0RQkRxNlwOXLEkgwKbRhdznak2\nhN1Dv+qr5WvyFiwmvp7ZRpRcdMEouHVnuJpIlm6svJD4dNjAE6/5EihrW/ms\n2fmlA1y0bPvGXsw1gVXPP9+Z4V1IqRDso/FDEfcPlXrGMfZmx300LecBI+hx\niUDZt79fGULc+agA4T6EfYUSc89Do+Jt7kFHrBnBfhNlPgr95EQn0lmMOhpv\nGs98jJmIXnf2S0RGZQf7iNXF7+FQxToWd1HUZyNIWgFTybqJzXNDZzQPrNrc\nJZ+bm0IaDk6tW5ZoupKs6cgaQQzDew5ED/7jF5PMdoOdhGwav7qbffthVHom\n2im7skzq0LG6zFrRjgJzWqnHx5YpDx4N2OoTHGgdCT+qbtkakgAvxpDlm4d+\niXX8Fqy6DXOfDzlS1Q41tkudWJsPmhaHOBaFKwQJpHCefw4B5R2avZ+XJWxX\nAEtJ\r\n=MNWB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6n2/LHZkfTYIp4zrZufjy7p3p1I0Xb7YhtcHWfe1b/QIhAM31nWGm42HxSXVqVlIYU4QOMuCCEg58oaQv3dbM63qO"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4cbf08274d8b2b543747bb51881219a12d7cb657_1637525848851_0.8150248658814359"},"_hasShrinkwrap":false},"0.0.0-e5d7432b8c64f99e692bd22e77ff4347eab15c66":{"name":"react-image","version":"0.0.0-e5d7432b8c64f99e692bd22e77ff4347eab15c66","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.36","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.2","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e5d7432b8c64f99e692bd22e77ff4347eab15c66","_id":"react-image@0.0.0-e5d7432b8c64f99e692bd22e77ff4347eab15c66","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ijVNHbIhxLjTBshU7BebLw9U2azbKyN03FQCgXdof+U3A10QNGx9V80KvaJe8UZF54QQENddiLQshhmg8wsQGQ==","shasum":"fdb9535a3de27619a4a5fd248764a77b0ca19019","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e5d7432b8c64f99e692bd22e77ff4347eab15c66.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCGLCRA9TVsSAnZWagAAwywQAIGfLtSUCcrMlQYv+gyv\nO/P+pjrQtf6MobKVR6+8VcgXPRgz1rjBotfDxQ+1SmQ0fPJucjnVQYxQqBD2\nWkoVxBuOt6xT9P86EvRy2f7GFLBuQmDZx2mFlAYYg2Pqr9CMa6xT9mVD8KF3\nwGFLFGqUGzBYbnnRAhdFPcZ7x0eBV0fxlk992XIr8l0FknqrP3OyBIjvkeXS\nvk8qQ6MLjdi8UjHeHssCxkv9MSbHTuaY4Uyd+Fp+ywB8+at+nkmWOKBLja/I\nDHqJk6tc9GjsGVfE+EWCn2R9f1VUTF5M+jJpulE3frOQWOS2k2+cHwH1wYJf\n+m66mmKOfE8ej9WY3UJ68LAvEZkL7StXvIujy98OwtZVrAZYi19Exjd+ODrp\nDTzbldMyLoxjzV+7gGWh5PticpqvThEJYLoV5KOMc7ZrSft426F2vJTKjzYB\nVtzqn7CYu2A1Y8LZXwfh2DXeApWdEUbmtYFKIgwLz0om72/TYk75x0PhUNWN\nGKmREi5UYPlkv1Kae9v2hE57n1MmpCP6X4gQmyVZI3t6RCJi1php7Qiuklm7\njd6tLO3fdfpz2PxTpHWJpgfG4w5Fn2NhWXQ4GyoZT40qd0zfND7QB02UIkZO\nNNFa44BQHX5yg3tFpV15wfu0RM5c+jQYm6nw1B2v+yptSHrCmqKH6FWYKLEx\n9miH\r\n=i/CK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvJLXWyyjcAaCvIf/E9RHcrNFC62tIKToR+p2q3ORvgQIgRKZnRrOoEtj5xPmjHcZ7iQj6PUtI2zZ0RZI7VY+9ImA="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e5d7432b8c64f99e692bd22e77ff4347eab15c66_1637622155349_0.7783178088401546"},"_hasShrinkwrap":false},"0.0.0-54c2886ca95971dbe85698c5a0bc7f0c567a213e":{"name":"react-image","version":"0.0.0-54c2886ca95971dbe85698c5a0bc7f0c567a213e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.36","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.2","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"54c2886ca95971dbe85698c5a0bc7f0c567a213e","_id":"react-image@0.0.0-54c2886ca95971dbe85698c5a0bc7f0c567a213e","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-SO9mJS5sGuPDwJx7OTv1/p7S2ij5Vkxq5/FfLj002swGWwctiEMw50BsLfWwgly6tbnm1vM+1bCn3U+4exlz5w==","shasum":"6dc3e474bbbe176c9fa996b1833bb87f08f51fe6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-54c2886ca95971dbe85698c5a0bc7f0c567a213e.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnbWTCRA9TVsSAnZWagAAc/cP/2Qt6n+obALZhn5lpPlo\n6OwnFz+S/7ptMvdjDdWMEBBgO0DbPazxPZooKSgxOUR0yDnSqoJGGQrooQE/\nXm6ELTv2qZyJ5jeJ4l/zH+E5fvtQ46OOIh8ZChQHdsPPl6ULCzzU0YNVdZiB\nh7toRweaPDa14VKVm4eRfUkjG/4+YIVbYz2qUK721DGb3v78K6AtYEjoQgET\n83jUG0y4sE8h/A42Uv64IB59zPPFoRcSlaZFqOIyZ5l5lBxEGaq+cPggqyeq\njqfJk4GLMnWndfeZdgnPXF0iUAR7iyT5mpmECDH4C4QdeKdPEudbddFEvVj1\nuhL28l/f3vLNqMCv9NhvawggvG5OiUlA1c0rQ2etfB+mTP1qaiinSoB81LaE\nARQWuafvxu5LLJOM9DFkoG/S1D2r+Jpm7bd+lI18jnc0hpb1St6j14VUs1bf\nNTvyuEer7qZaVXpqYG5VlofZLry1w8+J4l4JYoOQwDiDbs2ozth/oKGd3r/t\n8bxsnUayqv021bFSLJGxDeue5Cc+q3ydGq1+gNa2df3TnZxOO1jpodpPqVok\ndJXYCKWL0Potfwu6YIefd7JyY6hzw04tNhAzIvq4/uAsbIB/UdrGCZbVr9oe\na+NaGT5PDBl6YfxHAJj0+rpnxNlxTa0w4dKcqfr50hPEdjGK9MpOX1i6MGAa\n6dUt\r\n=sCab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsyDQyl4CMtTkCgnZ2U4KmR/sSgluoE3RNSGBB0LRfxAiEAj6LlNqQDl+nw6JAy7dxoc1Su/NkDakB/x6x3/BP/UQA="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-54c2886ca95971dbe85698c5a0bc7f0c567a213e_1637725587637_0.7485245184390983"},"_hasShrinkwrap":false},"0.0.0-db18d5553302f8b28533f97cde796944faf6afe7":{"name":"react-image","version":"0.0.0-db18d5553302f8b28533f97cde796944faf6afe7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.36","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.3","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"db18d5553302f8b28533f97cde796944faf6afe7","_id":"react-image@0.0.0-db18d5553302f8b28533f97cde796944faf6afe7","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-XqjtCDDcC8kqpRVLIYlVjEEy/zbgOtOxK/p/xAEUDuMtRnhQ4elzsoxIze6KEFJFQUZkrLptvQxI/UP5Gf5uYw==","shasum":"cfe58fb459e16f44d0ca818e1765fa5e2270bac6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-db18d5553302f8b28533f97cde796944faf6afe7.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4mLCRA9TVsSAnZWagAADSUQAJSxGd20+daH8IoHQCma\nik8pjfJSR87Etw6xgKCsE74R34+uJnmKd8mSr30thl8CP8kS0JhywmSvUuSN\nvETRZ3KtH4f0cQoahb9Ar0QGAfW+F1jCE6aUO2VJhhFqQa2jnmgtDFHCc7mu\nZ6pqBdwWEpylaLMGLZGQw2H+3AgdgQQkpmN5ZldvL+fJGZLM6VBcCb+D8jzd\nfEqDoXAaKNCbwOispw4op5jZwDrk7o637PKNytRQtMPhu9fWSYM9Cc/GEDtT\nO5jf48WmTndglY9s0Dxn/tLTBD51fUsX1RY8YD3SMN1WtUfqeOhS3CMCiKtw\nDK7Iryds2jXbL9a4oItdWgSOOMvz3XHFxANUvxyrOSS7tT6tc+yI2qgLhrYw\nact/Vm7D1JQ83Lj1je1uLDLwsrKKajCzSDfqNf8aKBDt/Z91hjq6G2x1PIa4\nA8OuA/XuxtfuO6IMZG/8yu6epGJjjjyIU+9MlMrR6zAF/5px/sUNebP6oCcD\n+9luLcx7dTbVeZr+YhBmXfLtOnAoE5dWfTFFqSwPD4Y2/8UCDY1j3vzdRp5E\nhLh3cVc+U3bWaJAdv0RFXZGdN5OtOl3K8elu7pyNa/3wZfsQGwANxWF7rVSQ\nDUAG2xccNokWzf74ApC12p28+H73OQrdkE6J9GnP9piqbPl/1Ovp4taRfCBp\nHCNl\r\n=b7jo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHE7dM0vVEtSJR2FJ43HHJpRd4lJylKeryA201B4swTBAiEAvFW3p9jbE+foKRkyrrvbe3aT6HfSH+ABFWM2VJHRRU8="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-db18d5553302f8b28533f97cde796944faf6afe7_1637845387168_0.6618345218612554"},"_hasShrinkwrap":false},"0.0.0-016dd03edd815a0427c220933709e377c847e94f":{"name":"react-image","version":"0.0.0-016dd03edd815a0427c220933709e377c847e94f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.3","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"016dd03edd815a0427c220933709e377c847e94f","_id":"react-image@0.0.0-016dd03edd815a0427c220933709e377c847e94f","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-A9fRzBrWYbU6uwbpDF/2rIvvJSmW9paoxqFebvZvgL5x/7pBlQlziKYu4ijB9vj+K55VW4eEZ4OsVPC6o1tzuQ==","shasum":"464bfe34b06675fd71e77d6011dd0c32a1e9213d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-016dd03edd815a0427c220933709e377c847e94f.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoQdlCRA9TVsSAnZWagAA4/EP/jnDSo3WMdNWCgjPK9FR\nQ4dbBmB9AOw0XeMzlJcL3VgfW/At1lc/95SOqYGwUIVR7EFtKjO4KOBpwYTO\nM9TmDup/h6IhClVpr4s7DBQPjwuDxCWdwrmKxhbLXXeAJx+MDb+XBbp1KsRs\ngVWDqyygNOkQV5/81ygneEfwExzcGAma3WVHZRY2fEWYs035lyLos8nL+pLE\nZ4xzwa1XGpoEjJTPUMdi/Yb5t5AKF4D0nmapTibX48tovJiZIofLlIm8er10\nYH/+h0NpinniRT7kyi9JZDCMu+6ozWg0CzMNm70lkGKUIS8lMC1nQ5Zt+Dkx\nzFrx/awI+opNDnVzaQAHD0q+Qn3Hd5h90m+cZf9kmg+jkYZ12fRBOqCdo2XP\ncXlqhF9/ctTX3FO1pt0ySVz+X8w5z4ltUf6JJEKErWz04gBfMrxGF6oYx7G7\ny35PNrZbk9pylGUaEs6BJrMijgxvJ+Lz0v40GsVxxQLQX5uiF4fwEiiCJV1D\n36imEa1WzV05Egr+tmpOyi6oPBiJO0TErMbKw3sFLMmDUMTKH6KklJFybrqt\nKuVqycDHzn13jYcR8R/ephQnBTiJS43HfPis+3ytUzCHfsbsfd85Xk3R3Bjl\nxw2fRqhUJ17dxmAGMvhz5MNwzOrzLA8DWSURO8xPwqLGKwiykzI+B6VK5/WO\nygCg\r\n=Yt1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOGnk8VqLRcPM16g/gcCqtspWY+FlqkDmOs4JpA9FdlAiEAutN91WpvMcYsIBJmhMjmfgJ/OnjpFkndBEM8M0VWvi8="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-016dd03edd815a0427c220933709e377c847e94f_1637943141057_0.5241224187888844"},"_hasShrinkwrap":false},"0.0.0-815e69919f6dc129b966febb63343cbb51718801":{"name":"react-image","version":"0.0.0-815e69919f6dc129b966febb63343cbb51718801","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.4.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.4","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"815e69919f6dc129b966febb63343cbb51718801","_id":"react-image@0.0.0-815e69919f6dc129b966febb63343cbb51718801","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-eP7/rK9ylXL6xFDgHcU7VzCeM6R3cyLM9HrhvgXz0frGb7V/qRM2PfA+C6hPY6RG6a/IZO2m+rKqU/XSgD4fuA==","shasum":"29ffbe9c1c108725ec790c13180145d1a972ae22","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-815e69919f6dc129b966febb63343cbb51718801.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhonoRCRA9TVsSAnZWagAACdsQAIZCyIrhfdhEosKRF2Fd\nDlnhu5ZWBQdX4vpI981k3aAjJEtwGu4yaMxI+o5ujUnro+h63IdMw8YU7EnQ\njnRKMPeY0M2xJ/EOSC6MlPr65mb6frzI0eaKCBHUposBFR2UQlcpiUGSXA4f\nObM6RCoMEWhhzZipE8rvImf5tumzYmRGzGPKDFl1Ne9vi4i+69gBb3eyNiWA\nXiALgPJQclSLywfdz7br2B2j0gaHHrZD9N+oZRqveDKnz5LJs8cEwjxLTQnH\n5pdYlAKqc3+5LT+YSOcm19sc3c35Z7MSZdRin4+FWcp1HirsoIOMcCthTc/o\nMfYveEOVz978lC40vRiEsDqWovXvK5slP2IkXwTP0vKEoWL5sK/xPNA1khtj\npYrVczDK7zjKOJcURSSsC5VSo0e6aWRjsh8VkKqqYtvqzuU9POPXCAHF6BJv\nQu2jGjMP0cSH2wSUK6hd87iQEGVzwr0lzPWBZCUL2H/uYgJLJdRWL3ySNtuQ\n7GW3cbZYquS5PoP/laGh2wRH2agNV8V9Yzy5wa41YLWnVUROLEvgbhm7gU/1\n1kxNs4ZiiZpN5H7j8RTuelOMISPlrxxa3cCxDUYiIEqsDA5f4xgGMoMLrzX4\nAFj8aq9uR8rWy9ZcHNvZ04BS1x3MNJZ9eQhC3CuG0uyigm8O8xHZ4Ff43gyn\n2Fer\r\n=XO6J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIETzA+wnu5hSO0YG0vrdyGqvYoj2g6VEPRR88kEsnOiEAiAQAtaZo8ijaPbEibRGosUnIBJYcO/goQdUUXDBHrovMg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-815e69919f6dc129b966febb63343cbb51718801_1638038033170_0.33463865702966356"},"_hasShrinkwrap":false},"0.0.0-194e7393c74d66f24d542190475ffef1fd345110":{"name":"react-image","version":"0.0.0-194e7393c74d66f24d542190475ffef1fd345110","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.5.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.4","webpack-cli":"4.9.1","webpack-dev-server":"4.5.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"194e7393c74d66f24d542190475ffef1fd345110","_id":"react-image@0.0.0-194e7393c74d66f24d542190475ffef1fd345110","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-1wClpfZgDthYiCUWjPQ3yFfWa4oMrXXea24z6wAlSY3ZPj/1sr85Qiw8dOlZSBiXMUNk31tqDOy+Qu6+vCSkjg==","shasum":"8a4aa72f5acbefed1ffcb60a8de5b3bf916f665f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-194e7393c74d66f24d542190475ffef1fd345110.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhonp4CRA9TVsSAnZWagAAJi8P/0wJ/hvcfdNPuDiF39LL\nowBV08Sut3dUUvk6k/ETMy7SlbCIHazPZk4gWhvhytvK7Ih1ZWVlgaDeQqDz\nkWpr6uJ9gKU4URgQ9373xqrdsLG5L/WT3hPFuuy6ugyd+qaoasVbxYsZT0Xi\nnjX/saPUYpe+obDZ7BN7mfC3xIiGxWGRM8eCPwFkvQ73hQ50FoT1t7b+mqmi\nlivnEF7D6A9VBcXKObIgunPCyYLbjGV5fYRfqfNZejuizBNiBHiz85WsblPr\nA41+8S3i+oG5KpAebx9hG7xyXOghX///rGIB8y384c2H8ggQuO9C9GRbWrom\nQrjrt88i6abQgXEpNTEjYfSQ2i1efCZHh5ioMUERTADj6w9RtNxQzQTNpXYy\nO/S+z3F/NgWyi7lTwUNB/nS2N2/uPclrNurP0A0KdwJ0scUliTCcgrTymDHg\nk5+O0z5U19+zm18AveUe4R2oVgnP112f+4S31Y4DCKeQPzyFbX28Fl8QHVCD\n4YOdxjqOTK3ng2YMHUwyM96025u4+zAU5y3mPMhkk0cNEm8LmjhSQj/h6Cvr\njqnhmMYpVZzywp0Eir3xqpSwZFZdYlIHplKTNb2xYqyAxs117K7xCOfrKQ36\nSsoGY39teQKKhM1ZchUXyik2VRiQaN+VDardF14+45dw8URramir9b8C7b+H\nxY1h\r\n=yWNj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6uXyL6n3IhscWlKY3uwlWTzlycAyIhtAWGvSe1FStGAiEAlM2Aa3lyuYtP0HYWkoNexV5SI+Zz2sXE8FOYrVxwtfs="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-194e7393c74d66f24d542190475ffef1fd345110_1638038135916_0.723498072291421"},"_hasShrinkwrap":false},"0.0.0-a439c86d97316693b3f6a852e297644e24aa5ac7":{"name":"react-image","version":"0.0.0-a439c86d97316693b3f6a852e297644e24aa5ac7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.5.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.4","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a439c86d97316693b3f6a852e297644e24aa5ac7","_id":"react-image@0.0.0-a439c86d97316693b3f6a852e297644e24aa5ac7","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-RYFTj4swIivgQ8HxquLeloQnqf6O80nusNSm9x2T5/hsaFZtLIUlmqfl9j9GLT9rWcb0uBN0vG+iLojCWLflbA==","shasum":"c49e7edac02a67c97f7435f0641de9f1b74913e0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a439c86d97316693b3f6a852e297644e24aa5ac7.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpPRrCRA9TVsSAnZWagAArtsP/A9hLEJzuDirAYYWXGkZ\n0xZgvgschd+yShT2aSoCB4EWd0m1rUVr56YD/S3SIUuvQWmuM8Xs468OJC3m\nwU1TBv6V7VqwUxjGSJDiNi4DYYcx+aVj1sdBpzjiwME/XyLnxrRD2EyPGMU4\nutYtGjUzCgnCs+03ehUJZ3T3/g+6uQ5XYQwgADd07dPWe5HlAQ036ZT2CaY3\nhH6tsggRbVDpBln2arMBXu3IuE3pj3CAk+zlHgZ1Z25krGLjzVsvBp89bu8T\n/Kh0PPMcszpAVAwf0vSvO3DyvO5GPG4BBgOunOP/WTl/RlcykFZfz4c6FgcR\nP24YOx12fO7cD/GkXyxYjIapIJD4woHjNNw4zRGQ/XQfElKVMC/1lB/K03G8\n+0Pz35spzxJWu4h7WAb39pKBezHRIYLC5mMmoK9Fr1KVTIjyBUdS+W5Pb+G6\nK9tMkAKx+4N33xqEty0L7ngPC11uB7ITIQ92qQlj34Oywu++akoB99R/liM2\n+B9ZvlVsxzW4ILtJ6pOd+DlvjbURLcbA4+bNmJDBwsRMZY71MKESTUtgN6AP\nngEn6NnIEbaOCwulDBsaoYefj/aZiRxyNL3xkCRRb8Ef4ZwhsM5LkOyVPcV8\nA23R7AK96UIHmfMWmwzn83M4ITlO9K8qQiUOBF4jxcL9oNj0LU1K2BVtHQIJ\nrqYg\r\n=W9gt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd/AK0FJs50qAokBy1yyfcp4zxA3SCndxS40+eNV+FuQIgGqXax9Okl3KN+iQ9v5BF8v1HzahTW4OR5qCqEbUBM/I="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a439c86d97316693b3f6a852e297644e24aa5ac7_1638200427455_0.9236250984786027"},"_hasShrinkwrap":false},"0.0.0-fb0fd706b473d2725e54543f3a14c0a232df9919":{"name":"react-image","version":"0.0.0-fb0fd706b473d2725e54543f3a14c0a232df9919","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.3.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.3.1","prettier":"2.5.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.4","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fb0fd706b473d2725e54543f3a14c0a232df9919","_id":"react-image@0.0.0-fb0fd706b473d2725e54543f3a14c0a232df9919","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-+QcXNe8pHuq3tWDLhR0ayX1a0PjXI4/4MzYSHAVhFMKhIoQlmr3wOFf6P5XMgSr3NpINjcyfRmAK8pCLUqRJog==","shasum":"d6c10c5e9e25a9bcdc64cd7bcd405b30e09f4d49","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fb0fd706b473d2725e54543f3a14c0a232df9919.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2WrCRA9TVsSAnZWagAAqN8P/22TJ0dng0ossFu+e2iX\nBMHMnTKQ7ikLeLCr420ze/u+z81IQEFk7cpVgYzWT3bdD+EwcF4800/af2Pc\ntwpYaRhX8kixdgH+r2X0WalrL2Zympjz8SedoWvgmhgk/Xne2eCuBFRvct0P\nIQPvn38vddgb7I2r76L39f1HroZRu4pLqcDpZWoqQ8FN1FiIAOzH2gGhpxVQ\nXwOVe5RjnA6f/IIu6QZmVaV9MPwnVQJcdhXsZ+vPaYr4F2EqZRChrVKPdSxO\nw0BTvRqew9cTMYVvK28tVZgc2WXEa3lsLl4mnA2XerzrYf9ruYV9Cfv7XbiG\ntGPzDOSdeWzGoGh/20fqGKkpeQyjL0zLxGwm+u02PM/9GY2LEclszjXjHs81\nHlON6dsAQI73MPhTHJ5XTyiIp39MplxtQkOnn+YoKxQiufz945Mvq7YvRpTk\nIaOTpUx0oFl2wqbh0yzFad8kZLu54zdv2VyBUX0/uR7kRf7ri+VotG8oFVcl\nXTL7Rsf6vDJ04cKScyJi5pTlBLBdFayYt5evgyIjnc1XCgw13h6lFQLO4Cyv\nI2vKK9hu1ZxqN3ZxnQOr43ybXype3DZhuR/xvZJbPkaWfnyGqsmLiO3mJDlX\nH4XJ2jxRlxX8LSammabhnIep3T8wqhOgGPFy7CBGv6aWVK84SwyQI46dLIpT\n7oXc\r\n=aDzf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1RrAEvmqDwWLeQi5KK/giC9jjLw4a/2FCkno50z2o0wIhAKrB1qYMsrLRR7qTazicS986RpPRy+qz3eyDkmFlBLXu"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fb0fd706b473d2725e54543f3a14c0a232df9919_1638360491527_0.690954444630798"},"_hasShrinkwrap":false},"0.0.0-76f111497fbdd2f9e657e979036b84354e4dc640":{"name":"react-image","version":"0.0.0-76f111497fbdd2f9e657e979036b84354e4dc640","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.2","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.3","prettier":"2.5.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.4","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"76f111497fbdd2f9e657e979036b84354e4dc640","_id":"react-image@0.0.0-76f111497fbdd2f9e657e979036b84354e4dc640","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-LReLZFmpiN8suhJdMtbylTJdUfzONQzzRUaXUJZecbJHIt6Xqd6iUcU4wpcfQW/7ODctpTQ4YCbHcyjrXZhXtg==","shasum":"91e6a2be31783ca57e1685ac9a2baf14469aa989","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-76f111497fbdd2f9e657e979036b84354e4dc640.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqSNZCRA9TVsSAnZWagAAiQAP/2jIXFI9QEcVvPLwBe6b\nUFYVna8K9W6eFYmj/hfdGeSMpYQkEN74OfnKn9ETE2f4zTRz2hcqrokM34sd\nSyYf84xXbFXRmx1BGqbuKY/6DyCwwKKCiXK/hQP1ytrDe7aXXI8g+wlVV+3z\n+CJdzyFYD4zcgQl0A3w00T0chzTcSwF8Xo5JsZeQDev+F2w2lYL+N9S9rMIG\nUJ20/fVmevxHa2PAVHL7WrpJU8dtfh4AMkCb72phTcI9jeXt9PC8tH8fFFtP\ncel3zVG2Pkyr4WviKjE//azO7KNoDIpbn2FfnvTy3Qc25K5z7OJsKHoVbHy9\ncE7vWQCG15xhn99IekW9uzCNLLMskHCZDgGKl95ni2K5NUoQI1meFmSBHbDf\n+eQRxImAzSmACvZ1K+AHx+T3HtM/gM1KsUSPtz/UXUUlx3okpV2KAfOX9Igb\nfIuuhwIfoUbJttSIJlP7AnEmn3i6Cdu+W89VqEcM04vNBen4ibhXYv7TO6HL\num4yD4zWDxA7fAbPwlh5gBOLxsGF7ESLzWSjoaE6EzU6ULpo/dj7uulQJLTU\nSXQet1ubQwD96+xMQ7pOE8yKfXFhP4MBjVBdQDPXrbIoH8REoniStauUQxn4\n0XnJFVPHLtpN6sFACeIVuNBIaTuEKuGXKhS36JjqL/MR9uHKr8l+kx7uEzxg\n65Oi\r\n=Ky4L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC97bK8x1+7+Vifvl19r/Np8knFSmF1r2Ccq/njYggkWAIhAMqumZZk67n00B5hIgke4vQ3msed2913VzkyKI6gLuNo"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-76f111497fbdd2f9e657e979036b84354e4dc640_1638474584913_0.2800877657010301"},"_hasShrinkwrap":false},"0.0.0-2041d20395347de674f75ccc90c718a20d24f497":{"name":"react-image","version":"0.0.0-2041d20395347de674f75ccc90c718a20d24f497","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.2","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.3","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.0.7","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.4","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2041d20395347de674f75ccc90c718a20d24f497","_id":"react-image@0.0.0-2041d20395347de674f75ccc90c718a20d24f497","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-LxVeynzDoKC2kiBCksWzcYZ/99hv60UN/JKs1hoCTTRNeQgFHpIrPWTplQcClYOcOo5mGHJu08eD7BSdvxV4WA==","shasum":"0c5157351dfcc10bbd6f465d1b057a32d24bd2d7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2041d20395347de674f75ccc90c718a20d24f497.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrRCyCRA9TVsSAnZWagAAkJYP/3o+TosDx62qDIbJiwyc\ndwsN3tJCV7O80jFWGNim2V1J6TarYvVOafHSEoAYk8a+AY2Mzs9aCpP9mb07\nynSpPju8m4aTRgGarFBTFOvUY4EasVtkum3kT5m8vgwwuZ8npDViR7RUL558\nGLGkPa3AruJqocQnTHRCuX4ad0wA2fr+NUwL7vUaGNhVdWPPjOZnz7Sq/keF\n9G+5o7jNpCwP/XA4WmsujW54Jr3Wc2R6/jw9kO3vpLi9UlEAEhzdd0vne1fJ\n4npWcOH+NnMI86dHO9sZrWKn/zMs7EGBbt6Zf0rMc8hoK6SSM3GZZhOiQBnU\nMCetWGJ3aUgsO4zSbgyDFyDsg225Tq5jYPGEMMRfwxQPqJjCu+VaVaNHyGQY\nzRywSeXZyDu/CenZmi1KJrGUwe/HiVeKIRrmDqEu7mSSB7ofrEHrV+6EVWpB\nGe/oO0zc2EfQuLGTFOjSV5ATcIvETtuDUBto1r21gdwJnNwiItmZ9CB+8cZu\n8sY18AifqKseXbhyJx9ToQKW0M1iqzCelnaEGXC6fDv1RT7IS8AgUL26LPL/\nSL991x8aeYTdyO2Mand7LVJuIexk7DILEraIwESj0E9fB6M3xgipUTvtWAXh\nBAFgBULaN+a/2n6Zl17t81/84kutVFeKuR25vIxW54rhlNPbNG2ZTU/vu2Uj\nmjr7\r\n=H9G7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJI/hkumZd6eD+jyYh0l83WypgxsfR1CJN90Kyjz6cVwIhAP0QCllewJA1mu58k+yaqzteC3Dpe2Jdc+vDTv3m61j6"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2041d20395347de674f75ccc90c718a20d24f497_1638731954818_0.6291494183440691"},"_hasShrinkwrap":false},"0.0.0-61cc0d90a960e0865dc212af4bb7ab3f99f5f6a7":{"name":"react-image","version":"0.0.0-61cc0d90a960e0865dc212af4bb7ab3f99f5f6a7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.2","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.3","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.0","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.64.4","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"61cc0d90a960e0865dc212af4bb7ab3f99f5f6a7","_id":"react-image@0.0.0-61cc0d90a960e0865dc212af4bb7ab3f99f5f6a7","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-mBk3K2RsqcAX0Ob9ljHNtVLbJwSRY/Nn09UzX855fuImqFuuJQXCCvHuLa6Y/IcBcGCwCKrwzCvyFewYY56Bmg==","shasum":"a23b2d7bd05c404b219ccdb0dd9c1a99ac224822","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-61cc0d90a960e0865dc212af4bb7ab3f99f5f6a7.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrolbCRA9TVsSAnZWagAAa7IP/0g/NuAyDusP7yWKsAzY\nCREQeFXoCF+BPLcKE/2QzJ2VfxNVy7yrfWgzK2cxdLX1s8tSWO5W89r0smbd\ngfjtw1Z77iDkTNxwoOwgrV81Zd06Wr6h/tJK2Zb68ClPD0zLHUJg9yZFVxkT\nHbKs0rpNLo4pKtNwlezv6Gr/7tV6Vbr/n72T2LkiInhlOoq8zn/FcYW104PR\nmH9DcLIphlIwPnARpYx+eeQ44yYP9CaYfWkCM0oFhGfBcq3djYgQGQICHNs4\na0KGolakmA7zOSNewEGU1+YVaIFl9QuoIEwGjhQHANrCVRdssnceFM4Bghxq\nlrUn/EZXOEGnl4hwlx/pXoAl+4WrhXH68irjA2js/8lffJ4KPqGX0OjktIC6\nA5JaUKng3zDUNmQCioPPXyrHV9aA6Bj8V7LJrSatU2hnuC9dzM7RIeKxwUDw\ntIufnDAgh4sjBC2ZiD8GB2KokJBW88Jt+8Qrhr2mjHoSygrGc0SVa943jb+Z\n657Rs0vpzCmyFsAbBSkYiPtmETvFuxN9fX9EBMXRu7/MatDAqYCAWLnRikgv\n3uAy6VbWtuwkBhI2Ho4+zisLSdRRl4BudR7kfqCAzpjEbh6LewrCNMBONpXN\nLupKrYkAvuSXLLKSU+CXsPZGK10fYNsdxttgyG8b/l+ilWY+tpvjG/0qp4J8\nG6Po\r\n=dT0Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7wCulwhWueNtjYuuEDxENfXwq8UuV8coj2OHB2+2cIAiEA3tRYe2EAgM2t4YylTiMjZFM26yOpfx/5r/ahR8LNiFM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-61cc0d90a960e0865dc212af4bb7ab3f99f5f6a7_1638828379801_0.22884851617086843"},"_hasShrinkwrap":false},"0.0.0-95bb371394702543822a40cc956ace02a5ecd6f1":{"name":"react-image","version":"0.0.0-95bb371394702543822a40cc956ace02a5ecd6f1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.2","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.3","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.0","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"95bb371394702543822a40cc956ace02a5ecd6f1","_id":"react-image@0.0.0-95bb371394702543822a40cc956ace02a5ecd6f1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-G1J3s+Q8/z49ziWphgiBXXTU+Ee52QTHRs4j+Ktf+PjcSsRfZx/8wd/4if50l9Tgz6IvUWRNSmH86uhz1qe8Xg==","shasum":"24a1b57e5e7b68b86e5a36ff521c31c9b653164b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-95bb371394702543822a40cc956ace02a5ecd6f1.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsA4yCRA9TVsSAnZWagAAGKMP/Rf/1+QncKxDyGrBIqxu\nu0HWLiC43UWBH1HdvQG9PZ3FCS53yQWXowZq+tvFPXfhadn8jSCkRURVavdF\n4CGWW+x6hupeTawRfuxnh6eUuMzrw9KPU2JuNR3xAVRKaavvDxX/9ApwNNbh\nRgybydIaQ7+gSsR7fwTI3ob2VZSHAMl7hMeaeRBDY1nTLNoM+z4tkqZ9jmBa\nt4OZr5mj97IDlhOZWYWzSQhwAirq/Lq3nSRTK/N+ZX2QeyPE21UrX+IPfW8l\nRRniamm/HzYy0/aNFwmssjHAR5ZMUG2/7i/q/btS2TebIWRSIeBeK0fslFq2\n+AmW75/f7W4hqfgiFSCcDyMZeTtJTJU/GQOcr/Yi+8xqQTdoAFGjHfW339bZ\nCV1pOvyVhpSIy/K4vgEJtxScndk3jJl90yFGrC7GAl7jm4N9dj8zwUsm5wZj\nq86KCJeJ1vgttli2+MP27aQUgweIjBN1cs92TsA3JXxILK1WwyldL6E3LXko\nqfEYA8ipyXP2eZMUSNtqRljaIMJvIdXInpmhrRp+5fX3i0t7z/5HaHxNfSMb\nEEuEqiXxh/8LZ4AZUEZL8dF+fb+mB+wtNvNIAA55V8ASWNSDJ3kGQt6owSOn\nhKHK9yP1XtFxJDLt24me11kK2l2179npigfy+i6hRckrn74WP/KGXDdwymA0\nVGgM\r\n=9yjf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2b4WHqZIZxm0YznDJY2bRe78IEszYEs2jReTkkzavQAIgUPVBHY0mlzfCPulnzdV1XlEpWOGqzGmH39VIQQuWugE="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-95bb371394702543822a40cc956ace02a5ecd6f1_1638927922270_0.9305888221333269"},"_hasShrinkwrap":false},"0.0.0-4d520e118223db9fbfbd80df8bc1f5a1b61faf8d":{"name":"react-image","version":"0.0.0-4d520e118223db9fbfbd80df8bc1f5a1b61faf8d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.2","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.3","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.60.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"4d520e118223db9fbfbd80df8bc1f5a1b61faf8d","_id":"react-image@0.0.0-4d520e118223db9fbfbd80df8bc1f5a1b61faf8d","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-qY58PYQaj6napRUH8B6tzfsGEGREmj3AH2ZqV065ou6hqO3M6AdTQMLrjE5DmWFVrOV6kcfU3rA5B1ycJ6pK4Q==","shasum":"37ffb1bb6247323b11d3ecd44ee36be095eb8ba6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-4d520e118223db9fbfbd80df8bc1f5a1b61faf8d.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhseNJCRA9TVsSAnZWagAAXF0P+QC/d9ULMJc3BFW2Yuq8\nicADA+WzM98D1vzcZYoc3waWNoB+IIjJ5KZSHKs13zNv9bMSvaiJ8/CG6pry\n5beenUf/V3KYtWBkNsVWtlAyOH0jRsDdAIsHKBeIXozAXm7llrPAx/oDXlKF\n3ooNSA+T9dO7vSpRsZSdh7V/Xa4ZcIhcL3wsAjTshOJz5Vfs/MxndsFdIpRx\ndt5ld6QSD8rhMcBQD560ok/61cOXLpLG8hFe92VP6WultK9TQWHZCD8EwqGH\nAWJo71E6UP4erPh3+4bmxQbQrzcNm1q24iDGBhkPI7Aygoa5urAOsCNLvPKv\ncqPCas49xZTqCcVSZrTSbEDQogSriJwTOwZwKFaylH6pH+XlNAqO6uVsjuQk\ngqlgq3sZ1yZVjNz9mwXAICBr68vHC5zXMhnIJDmxaSD7vSQAViLmadHH30Tw\nJSrawibdSjR3cWA/kF+RwBpvNUOuMhD+4/bw2EdNDstYN/IskU2t+W58D32y\ntVX36zQ3Kpjhrpy6WA14GUK99Njw2VfiMLSBTwHF3RZbf18H2Bd6YzsNt8wn\nzbzJFh23qVkecuq8fG3AF59aRSrhTx4BvWVDrwZ9z5etELJ/rJcF5WHclJEO\nUlBBCVoCmKhRMAt96gsKXEMyHsntYo8Y1eB1ucxrQ1SMLdU04My7m99Qd+vr\n3+d7\r\n=hmk0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH2hMzOiKbRzcTCM8z70x2Y97/PgHN/d0xcfWZD2U7XUCIQCe25W7rL9peH/tnG3fFHX3aiD8DgKdLWtZa2RnOuargw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-4d520e118223db9fbfbd80df8bc1f5a1b61faf8d_1639048009665_0.6793101607207794"},"_hasShrinkwrap":false},"0.0.0-2cb98dbeba0209f59e5a4947c160dfe791cc4554":{"name":"react-image","version":"0.0.0-2cb98dbeba0209f59e5a4947c160dfe791cc4554","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.2","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.3","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.2","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"2cb98dbeba0209f59e5a4947c160dfe791cc4554","_id":"react-image@0.0.0-2cb98dbeba0209f59e5a4947c160dfe791cc4554","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-VetzCFZhsIGHSZA3s2IhhHhFWI2r4fljcxsTwzTEiQsp4WbVKjmiZzLR7/emtGpPqIPfyXkXl83h4atdtKhHrg==","shasum":"d5909dd775ce0f9765291c2c9c9452646018a36c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-2cb98dbeba0209f59e5a4947c160dfe791cc4554.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs22xCRA9TVsSAnZWagAABkoP/3pb4iXtRXMPscENzgIT\nZjehQbB1xferLoCv8sICw5p4Jbh1hyFFdYw4ggIxDRn6wAJW8EPdzz6vX6Tn\n/troDreyHU2bKRG5fjr9ymoZlNBpIvU5R5myHsK3xUp+PCoGpQvyf0TVlth0\nyrF0Dgwi3t0EM2DGprR8dYb3wpA0iZ56g7EBcTyhkUXVuCG5uj263IAeBeby\n25YvT19eVZ8bSX0AH036cLYV5yJorMoqQ/YrNqq3YmRzVNx00Zv8wPQut0Ok\nQ+HLQcJ5mox/9RHB6Nr8gXPFZrB+I6NoudrZkDqPtY9t86sUYwz8ipjt/seM\nJ68oOK9ocpsFDjWKnI1Lk11g9/EmbnNRuj9q4wTxXo5OoXUaCtOfUKnHwOrR\nayZvy+2V0LNO9K5M0QkzJyKTEu4I1C2H6W7s3H90JmsVmOviJL9EvyAuFsu2\n6G15Ro7++jhvjPg9mceJiyEzATEqMYOiAFVe9iAc7iY5AfpEEsau07evSuNm\nPWLdWfg6JARJE1SuZskw73zO3AWClOl8zLkwJVGX3ND1YdDWf+LidHNw0kgV\n7e12ss2UpWUGhP97UGEoL8PiodPC1YxbanCSL3qGNfmue6KeMWoF+bDruo5C\nHhzFXr47b1eGQvVZYr0rDvunovlnoklGj5VJ43pPCvfqwwr4r/rCBtkS9Mkv\nRuj+\r\n=7LRu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQqsia0zvAbfEEicQLcdiOKn0cjXRN+p+4eGhaq40zWwIhAPVLJIQbHi8e6tE0rnuoEbwO1GzcUTcBG2XN/F4PoQ59"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-2cb98dbeba0209f59e5a4947c160dfe791cc4554_1639148977176_0.46588890080656675"},"_hasShrinkwrap":false},"0.0.0-855bf1019add6c5f6e86c9e9a084ca0e61b81077":{"name":"react-image","version":"0.0.0-855bf1019add6c5f6e86c9e9a084ca0e61b81077","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.2","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.3","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.3","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"855bf1019add6c5f6e86c9e9a084ca0e61b81077","_id":"react-image@0.0.0-855bf1019add6c5f6e86c9e9a084ca0e61b81077","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-u8EQSYgywhpQhutjOEGyQywF6pg/F2TSJCkwcS4zx57AhAvuTXrdSVPWYXy6FkixU2U40wBWPjR1SDGOPrDfYA==","shasum":"e206d0f96d8c2e45c0eb214de2e7fc8b97248b0d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-855bf1019add6c5f6e86c9e9a084ca0e61b81077.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtOMrCRA9TVsSAnZWagAAnZcP/0caU2kA+PboGtTe021W\nUJ+0HBpUQ6JvNWtFWxhm5GAToS7zgVsGDQth+hkDiloUQNOFDa90Fcu6VKka\nEqo56uMuAgqlkW3zGKGxOOMFdBaxKL6FSq2mi3QYWf8jCDajRDXpnu5sM6u3\n94LSC4agZu/UYxJ+JMnt06mt3iTkOWOWr6PLv6pO7yX42/dQJu3JQQuFDfVo\nsTbxaOUJd6ELLpSt35kqw94ENlUTATyzeVB6qx0QBuP97vPBsQUATRQpOYfu\nFMx3mMEONfW1+1QHZjPJhrmfmIsgvGRK1rkEb3yDkrez8HMO+q+yLp+XXL5u\nLgDM2TIpifgn0THL6R3pgyvcFef4SJ1x9IQRAdb0Lhxp7N12X7Kc+FhQ/u1K\neYBx00VzLAj7ibhQ8VEUN9vxdnF467IraYI9GgqgRJ2yIYKJTMraxNZ0TpRg\nI936jAFOqvnifwNlXEnJzQ/WaqcixkHAxtZmAsJg/mbNP4TtY49khVMcJ4ym\n6IB5cZx9YQcIf0tQkGUseuar5LiQEtWQbRR3NlL8Te4pwBlNtoOJn67gWVct\nmIwJdpVWAaPlTNw0qVWdQW3L9dxaBa93DYByu1Lp3CmeaSV1V7SC6lEcJVz4\nBLCpElCtpXZgF07e3Y+f+TayEh5dgU5Q7tX8eKu8Dv4FKlmyv10wgTs/mmcC\nRN2T\r\n=gNWy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBBoqktbcSR8sXy+qpDG0HmesfnAh0mNDfvGJI6iNzMnAiBZd3lIfTf+SzGivohnArSQHhbdtIdvbRURXyjSonbm2g=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-855bf1019add6c5f6e86c9e9a084ca0e61b81077_1639244587622_0.46965955942466997"},"_hasShrinkwrap":false},"0.0.0-5ca22f1ffc4414ceb2082f25bbaf158d2ec76efa":{"name":"react-image","version":"0.0.0-5ca22f1ffc4414ceb2082f25bbaf158d2ec76efa","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.4","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.4","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.3","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5ca22f1ffc4414ceb2082f25bbaf158d2ec76efa","_id":"react-image@0.0.0-5ca22f1ffc4414ceb2082f25bbaf158d2ec76efa","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-M1pcucTjA7oDU61xe+FMhI5gX+bTwfVVyewDT/IUcZ2FJg9Nkj6QVGkM/8dtSFBgpbK1AvlGjflj5SoDrG2veg==","shasum":"47485cd891b955467f4be02dd5a04dadf9fd8e3b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5ca22f1ffc4414ceb2082f25bbaf158d2ec76efa.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtOOnCRA9TVsSAnZWagAAcDsP/jOiW7XWe0ckhfmUYwzP\nBk9ozciio8zn1Kcq0ivXr6OB1aMVZu/lSWOXPnB+o2tVKHJlu2oNeeFNqL48\nTx9abdpicrZ4mi3vruooedHDhZF3AuE6BPSz8+3gYkU6l4o1UGqSoC6kSaLO\nOUGXSxIXj1jGM3FeXr/WiAtH3930ZtY5DS6fz6ykUUuGx6aT7yb6Ld3V95be\nkqjdF23CmlBgPSccmKuMtjsZLkAij4V5tDjHzYSbRP+cMA8oEtttcw035x3I\nhsdsc/vI6vJJDVJwuK1iho9I3gYpMbBEKTLXbjLQDb9kYjDwPf0Bsic+k5nb\nS9GMi5Vi3MeoT98zvbZAM+DHuDbp7zXZEbsV+g8XhUEr2lnd4wKspQga/sC2\n2J9lLUz3DgX+XnPdf0TMs4DZMtWntm+3+DtVKLBdS3yiaCorO/O9ueqmnJ8s\n+FhjFe7w4vSPG/d5uMgYyhj9cWhoPIIufOouOpC/RI+5EyimZfHZPd+7NxdY\nkXo4Tzgm+Y3D8kkIFhr4bUUZAaTPMdCmd4bHhWwxKwzO9Q8SS+xU4B73Xw6I\nfiHLZ/d8CHNQtzPYO2YV7/lONJWTSOMkhxUANAdBxOnFoqoo+ePKcbh75hKs\n/2iYK8dsrO7OEohkIMbJbCdOG8aqu4UpfxecibYZ4jhqF4A3m3i/Ar1ZP2Kc\n6XVi\r\n=iQAV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0TIZaKYK5xkQ3WeG8PLG+YIhfpsGjXyjlLysy+vNwLwIhAPWHk94i0+plqjcOHBlfXB2R8JdXaqENnZ71PTuxQf1y"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5ca22f1ffc4414ceb2082f25bbaf158d2ec76efa_1639244711775_0.48644698601334535"},"_hasShrinkwrap":false},"0.0.0-5d9daf25a520c373e7100962a402a3ab944a4cec":{"name":"react-image","version":"0.0.0-5d9daf25a520c373e7100962a402a3ab944a4cec","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.4","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.4","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.3","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5d9daf25a520c373e7100962a402a3ab944a4cec","_id":"react-image@0.0.0-5d9daf25a520c373e7100962a402a3ab944a4cec","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-r08mRn7jgXUoR1z5nPKoN4vxkBL6exJl60ELTvi/gaZOUZj8+aCcntovKTzFVWT3GOT/ulK5SA7wb4UePb3jfQ==","shasum":"01a09c859822d6b59dcc4aa504865e63294cca78","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5d9daf25a520c373e7100962a402a3ab944a4cec.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtnbKCRA9TVsSAnZWagAA+4YP/i9F0WW/W//JrhJVrfOe\nvRryLq8/tNoCiCzf9HO5wKVxfudh1AOldIOclSmx2RjatKeHKZh2NhUW3r8F\ngyEJoiSkOwUBBDBvupCjGxY4qM6airdp4ZX0ea1cpe/aU/JXDvrQnB6GwY0Q\nSHLdFz0VIsCTCsDsxEjwph7x3s8h1kRI2kVKuDBKQeai/huwvGbGO15IFa+k\nrnOey9ZsjQZxbh0ZEYOnP+YPjosNXSf5TCm5/6DvxFoEDIUwAmOHMx8RYaeZ\n8jAMQJglwTKhGvU4y4s8iCXW/SOFhiW96dTpUInQLotQB+9znhdP9VBsEcKN\nrkFRWp4yZObB4fmkrmvGNzNEccu1OzkfKGs1KN9sQmiSNzAq2s4WM8KkInsB\n559gipodEdrLcmrtODJgHh2tCZ+fzkFiuJoqx6/YfjiTu4PF4Oj777kEXNbF\nvw0YvayNmKXow9e0+NJaMnSZzkXDogVQiA0jHQ68z9QlygZB3x/s4ITlqPOk\np29d5GHaGRRFr5FwnHvgpSzbXoYwJ8FcVVBHa70uve3xxtrDN3/Fjm+RSuoc\nxzvfQbLOeUfwmP61u+i+el1H7LnHrdvJdKcTXCUbivFaAppEFdTCtSt3k4C0\nv0KCrYlxjumfNyC9d9MEEjCDt0CD5+OBgwrbvFfcYlYJPkdpJpeAAaFw++jR\ntHrA\r\n=oLax\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVj5FHzus8QO1dpyZ25ovvmLPa5VkEXswKVBlry/E8JAiBlLCmLFfkCIKM27l6nNvHT66MGm6Vc9I/7WuWkHN1G/w=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5d9daf25a520c373e7100962a402a3ab944a4cec_1639347914084_0.252930137534618"},"_hasShrinkwrap":false},"0.0.0-77066a3424bf77e5bfc5766fdb8f3b0929baca05":{"name":"react-image","version":"0.0.0-77066a3424bf77e5bfc5766fdb8f3b0929baca05","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"7.16.0","@babel/plugin-proposal-object-rest-spread":"7.16.0","@babel/plugin-transform-runtime":"7.16.4","@babel/preset-env":"7.16.4","@babel/preset-react":"7.16.0","@babel/preset-typescript":"7.16.0","@babel/runtime":"7.16.3","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.3","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"77066a3424bf77e5bfc5766fdb8f3b0929baca05","_id":"react-image@0.0.0-77066a3424bf77e5bfc5766fdb8f3b0929baca05","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-h03QlfaPOLY1JGpCiPZibzRZhC96WfcyKMKjf5uc308uNyWuRc/9BT2PWGA4OPcC2ymaEAbdPpm1RlGHY7jI5w==","shasum":"aece3194df31ae92f675ed3fed9e54bb3622b0b0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-77066a3424bf77e5bfc5766fdb8f3b0929baca05.tgz","fileCount":20,"unpackedSize":40570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuTgjCRA9TVsSAnZWagAAc70P/AqFWE11uxP5Ex/ed1QO\n+EjsxnuAPDlZ0KMjBZ8wkOrqwuytL3ICHRkT6efgsmgMRBpJj3h2gsXqH/16\nNwzJiI6rbXzwaYkur6kETF3fjCxsQg/ydCV+5s6T/VPNyl0zL9gnhBHcUWqN\n+xz+bthrRGE9Db181lgxO9E8Tf4rJjPXVVx5phc8GGmxo1cszENEqJRONvDV\n++LsAIgGOinJB+dxCj8FWAynRsuIE9eHCePX55EHsv1r34TGddPMykxs+RGO\n1tXs5tO/T1YIQhUjcHft/BiFJ57CZEHfF/3ThwzJ4WKLBwdBkm7HZWblMl9p\ntxgcgJP1rFcF2L9wkly27uxalIzbsEO2/NqaRVIlpxFLbMuoOngLbjr69HWL\noCtQGpi1KcsHMwsROmbH2zAGkgZfhXTXfncWpOByyiKECRZhA/mPnvWMorzL\n5bJ8y68j6k0UhQYW3Qtm94pUXerAyboPBt+f3VMnMK/6PQn9i17iYJw4oR+L\njvhxxYWks2bvwUiouLvudt9APYIoCuOcAi3n5f9YexelCV9Cog68bOIcDacs\n2D+cZQaFQqvKHVw6dwGUC5HSAVu2zDfc1XkUhCC1fnw8FsSZlt7NA7lWpQPd\nBgh6dqaYeHSeGcEvgMS7CyuRuLHsc2PPEHcos+f1qUC2j7vV0GLvNikef3v8\nDgZs\r\n=sDWU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSmCgi2CQHKLt1DwEQLhLKP81VCTlLEEr788AUz931RQIhAPJBxt19sKS7QJT4df/zjxvNVtzC7eLbq0L97ztnBKoy"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-77066a3424bf77e5bfc5766fdb8f3b0929baca05_1639528483230_0.4962410004300506"},"_hasShrinkwrap":false},"0.0.0-68c1f83df9e60ceda8aa975330a665070d4b11af":{"name":"react-image","version":"0.0.0-68c1f83df9e60ceda8aa975330a665070d4b11af","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.3","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"68c1f83df9e60ceda8aa975330a665070d4b11af","_id":"react-image@0.0.0-68c1f83df9e60ceda8aa975330a665070d4b11af","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-E9p24gfnZFMZDK3+E8G3P/kcpMMaXWzYFN73nCWTso4b1bxXAeGpnDCwPQ8ucj5f3uR/1yLNb0f3n6B20lPOGA==","shasum":"c4406b96eac33e1860137845ffa4199dd2927997","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-68c1f83df9e60ceda8aa975330a665070d4b11af.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhusJ1CRA9TVsSAnZWagAACGsQAJEmfr6bz/XD3RnCVcWl\nobo0EqglZEg/iW1WUX9NTY/Bx3P2NBRsEk+qIZrg9PldegNFAsqE6/sUsndb\np/jO9hSIi7hQQw+XMJXVP+xZgtado35xFv8nXBLDxcoBhE36kdeBZ/kmbNrj\nyghN0jqa4Qut/s6tijvgSj8lBJyclQHzIBo11TIcy4Er46vjm2bMmvFRcuZs\nSuU0q3/UoimHBlKMSqP8OXf33+JINw+LLqCHtvrX7NeT35Laeq4ZP404uFji\nL8ISiwfebdsEj6S8AFuefKpUxJs6qq2vqm1KD0p2MEDKrcFmg30Bl12BDTy7\nOZYfMc9RD2g/gZwssGAaXPtv9fK6ZxbOw3SJdHlSYxHyEtAqDuNs0VF7ukhx\n+amViK3RHDlB63ZNrz9ucIN8vLwJ1tJMxuGIY4ZjABybLcnxNv2AOOoECj1C\ngj4TSbCn67/1Kzq9k2tsNn/KQIUIYrfaqvkUqht2Bex3DvBVhXylmCBSJv1+\nojAm79Ys+drdTk454YoRNZB6VZ64elR0/bbfJBFGh/te9Vsv5NrVKNwroBIS\n0A49PKJxeD7zBUt2Pyuwfh+D+ZQU9/6XdjqWza8HVaCsCS8P9h4KR/5eUWHU\nqkQIYBD+ylm4wF1Vy7TBXT2ye0Yutoxr8eDrdyG81mr0OZl53R9dvd4oRZe9\n78cC\r\n=5xxz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEyzexMiq0qrZ9re7K+bxTJghEXNUGBkBErIU7EnxSC0AiBi0E2XfhbmP0m6HPNzOXUpBoY2gA64cOpyXzxoaMqokA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-68c1f83df9e60ceda8aa975330a665070d4b11af_1639629429246_0.1387061051932712"},"_hasShrinkwrap":false},"0.0.0-cc736a0c28be38858eb6b2d0a7dfca8f9ea8146d":{"name":"react-image","version":"0.0.0-cc736a0c28be38858eb6b2d0a7dfca8f9ea8146d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.1","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cc736a0c28be38858eb6b2d0a7dfca8f9ea8146d","_id":"react-image@0.0.0-cc736a0c28be38858eb6b2d0a7dfca8f9ea8146d","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-0E9L2Ljqi39A/RMJ3t0M+nTjILbz1aFANrNrpjMM/VFftsRDdicULbAVttfMMSD/VYPhMYJhLtfqDgi2DsJX3A==","shasum":"aec60cc2e647e208e191550ccdcbbdf0cdc12cd4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cc736a0c28be38858eb6b2d0a7dfca8f9ea8146d.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhusLFCRA9TVsSAnZWagAAUbcQAIqMHMWr4q31njCEGvW3\nElb6mbEK5lZyj/xMAGscSKutseiLXgNAFEAyyhz88vR2GwbEhKIDS6AqT6oo\nvaN+HViq04vzJ9gXOQUkRM1dBErpuzF9mdjnF0pS+zYCUIEsDalOriNQHmmT\nc8SOu3DbaSDYlb9xokn4JJcLFWzGTiG57DL5KwLnX/jFl9RW8wjMCbhmUfiw\ndzUM8ICGpU6Y1XGsVPUQ3Jz2inEAAxNjdOEffgOzVbMbVGAu/BsTpY/fzaFY\n645oCu03jv8K7PsmNxjHHblybQVV+AorvC5QmQhIvvi9+5RvTtQa2aAkIrG7\nrhPCb2EpU4OkVEbZkoIHhyAgIEx0DtQ868Pf7oW1yZf3ZQ4XruNO4Y6GJkDu\nZ+1vQXST7g1w8M87LbuQ5Ljp/DJ4AFJslJJkaDgcHv0DqbfPdggnA6AXqXCr\nS/Efdn9XtcVX9fsb6aErB0d1A+nZaL+ZlSVTOQQ5sdbC08qVT0IC5+6UJBLY\n0JKACkxQKOR1u6uA8xb/Z1EkTWmGSZ9aC5LFfWj7t17HedmTfgsiJ2p8mABF\nJ4tBPtHSwLq9iohjLtHsfyQgjfWl9UypDAPmXYO01KNTH6fLsf6RhXSpZxsr\nWkLdrR84uf4Zcq1UeWWk5iNJpoflJy7P3nkk6271X2RbRFOsGaQcBGUb54nX\nu4SA\r\n=nvMZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQJLlUovJET5w5k0vjb6zv1CUUz1x6rASrHBxCg8Mv/AIgOMvSuTTTuGpbJ6nRYRsh9Lxc1oGqbv8I08XbMUAac6U="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cc736a0c28be38858eb6b2d0a7dfca8f9ea8146d_1639629508863_0.31304653157377826"},"_hasShrinkwrap":false},"0.0.0-7b6d22a74436d47d7fa91f197c727d82c2ecf431":{"name":"react-image","version":"0.0.0-7b6d22a74436d47d7fa91f197c727d82c2ecf431","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.1","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7b6d22a74436d47d7fa91f197c727d82c2ecf431","_id":"react-image@0.0.0-7b6d22a74436d47d7fa91f197c727d82c2ecf431","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-6N0mafP9HOgjGcl0lF7STlxCQt/JlgJ5er5LBgo89AcTF8E8FusgdlxND55Dq8NoPO7+lvzx2PdP+kw2K7EWmQ==","shasum":"6d53d591c63daab5c04c13f5079b1cb2783ceb20","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7b6d22a74436d47d7fa91f197c727d82c2ecf431.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvHOvCRA9TVsSAnZWagAAfKoQAJcOdXxtdGqdm90lN560\nVJlU+Bkixiu7cQztjmFiQmxC4ng5i+iumhtzQppu/nONykCITsDsnDOLD9Bj\n4xfd+Y0TOkQ1f0S2g9eYgMMSGrcIsIlJSJmWd6FIOnhfYt74B2lCVmJ+VSXr\n+OvEzwE2j1MTypKEpAjlD7KGP+pMbYw0QzxRNCbKEwGw5mPxpPPnttq5kUjN\nQvcshkZVUEGMqOGXa6Re33wXObgp8Ucm6s9UiquILcfWdAYxClWRfsIFXhfK\nA2+EzCubpaQaPABqiaIcmlvDsjCGebERFsiGvNBFiUHGdrrfLkLJyuFKVJGy\nGjjQQ+MsRF1yY+04VcWj9i45j/j5YjmIAZblCKYS0+zWwnrU9IqQC+uWDe5V\nDLxZeqx2BG3kVNn6GUCaRYYV6kc+rUgTTQCiCF16T3Ib6ZBlJRhwDO3P/xRu\nhm3IMXn1f+SXXqGxRMdvxUMhJvc91OIDMeP8N2ksrItkfAz4GClixrPLBREl\nJklOFl131r4VGmHbLX6hnVg13L8sF2a1kCZfAvMJ/QbJLmTtWgGzBb8UEq9G\nq8P6/aFT/JPyFNd95913m8F8MW/sOh9ixGx2eW8XSAcAlhl8+u1QZJgc/ygh\n2nNlPforcHN+A0I1SH2joPHhzHWz5EFtDSgSesJxDu0nMtUcAOFs/8lcRiws\nMKLw\r\n=qMR4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKzsbTF7t0FmR1Mmqgtz+ItZdo2QWu/r25yrByD9bNlwIgcRN7cn9zXa+m/mZTHZIlf3DgDyh6TJYaktjDmMHY3j0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7b6d22a74436d47d7fa91f197c727d82c2ecf431_1639740335682_0.5863823981146021"},"_hasShrinkwrap":false},"0.0.0-d9e18d8d2be4048dfb53c39b306af8c37ee1d9be":{"name":"react-image","version":"0.0.0-d9e18d8d2be4048dfb53c39b306af8c37ee1d9be","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.1","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d9e18d8d2be4048dfb53c39b306af8c37ee1d9be","_id":"react-image@0.0.0-d9e18d8d2be4048dfb53c39b306af8c37ee1d9be","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-SbUcvpx33zYjRZfygfZmCvv9ltMe/O/ZccKrxebxYRzxqwjxKAZhc65Riq8I9DkIho3RpHmti6fabT95qe0LEw==","shasum":"ac2cae033616e64f91716c0f0325645da09f179e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d9e18d8d2be4048dfb53c39b306af8c37ee1d9be.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvet3CRA9TVsSAnZWagAAC5EP/1BtpkAyRNDF3AXW7HQG\n7qarQegeGR+L9hgNXeKFka4rRf5g4HPVp0fW/sg5EC1bK6dmKKokqR5YqJvR\nS11GrEU2OlNHskEnMg0zhtrhBNJInbQVV+iMTJfA1xmmM7kcU50nS9KY8oKs\nScJKM4+vrWDuMJm0InHTxfvD5YhuCCt1LOKPPqt2TX+gB26gFhUmvhX5Mjqv\n7z2H/jEX/DWlyjOPKp3EylwYYsLHEb32b89uw7Rp4QAdKL3T0Ge6KCKevpZL\nWeNcxxzMZlDor+8LqHz9VGWcyLiZGgzdybnX1MZ2TydzN4znWZT6tM8PGSZ8\nqOJOAay61yob4NJnVJXpsBNl8cQzfSK1KND0xkzhalsoxE4/UUbJy9lFC8sv\nxn72fHTPdgKfjQNR/h7/Tj3oh7BPpU+pUMnc8q1hyDr8lE3ceD6aBnc8o3SN\nO6VPIZWGqEpHmrzSxGGz7X8CPV4z4RsMrnWfZEkew2dEcAQuBfgOndSY+FHV\n8oG7LHqjOuLjmcXVd4rYVUDCapq9XL+Wc1mckVAHwpaqiTlCmBhx++65+fcQ\nN8QBGtP/Ql5CfPnmvRWy996Zj4XZMW+x82dBwScU96PZZyMNiuoQ4wF6P5Ef\n+Odrv7tyHEPRjOKR5mTKKvIj6dNYqMrJ3X+PUW5y7l+DcXgROGpzVI5ocdEC\nqU2P\r\n=xadZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI5lmgIomTXdz7y+q7eeQTdFBktk/RZT0W5cK2thnEAAIgEHQwrt069nakqp3t36+YSQ1A/XOhl8hSZap4bbu/EHE="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d9e18d8d2be4048dfb53c39b306af8c37ee1d9be_1639836535435_0.07267760557748137"},"_hasShrinkwrap":false},"0.0.0-b760c2b4662b815e121ffd65ef90c4b027cb78a6":{"name":"react-image","version":"0.0.0-b760c2b4662b815e121ffd65ef90c4b027cb78a6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.6.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b760c2b4662b815e121ffd65ef90c4b027cb78a6","_id":"react-image@0.0.0-b760c2b4662b815e121ffd65ef90c4b027cb78a6","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-SSmsRKgFygEJZlTyQZiD5IxNMCeYKQFs8qVnqapACR+wRCbAFFO9II+PUThZl2LwOCW3pFmdjmLhozTo9jz5Uw==","shasum":"7bea980af4446c33c317b7ac9ca5444b7d66f743","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b760c2b4662b815e121ffd65ef90c4b027cb78a6.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvfrzCRA9TVsSAnZWagAADKEP/3ncanBt7NQUPcgwlmAv\nVEJ+sZDQXpx7TwBXxSq0bfcghq2esRzMmbEOivx+gCcdqy2VqWpXsXsu17iz\nJDzr1KPBKWZt4cKy+GH1ImQjCe4aB8r62DXkWX9eL7UbpPdtlVfCLbA2Jglo\nrB8e/eYw6TAsMPJKIGbIITa3Y0vwwAtZrJoz0VEqevyNZ/qYbXe/D9kgPEX9\nmNEx5gJXuHXzwsA+alhC3gTMI0vGzNocE6M41DJ7QEC+9P7Q6gZVxn089/mm\nzOftaIub+JKgUu/K2NlmW7tTyCRXFcmAvKX9gidJ27JP1E8anZ/qnaIIYQZZ\noqZJ1Tdo1DEqxJqYuSigzzwVrXapSDUBZLfCVB23xk/+KksFzphMXm1JMKqw\n3qSvigVcTu1Qayx3KV9bvCsQoTHjSL3bgDazStMakor5gfFLNUD5bA2mEOZQ\nsTZca/xCCoubg8khnwJ3HdvGWPWG3v4OhbLbAEH9dOMtnI6GPgh/6bV6J2A4\nNI53bKXUC3gmb+MIUrP6dJjSvOs4RJhg+XOebAYBD4ytfhWhT+j+SwOtLAob\nmw/x/JrAws8BodyZTs+4yooxhEm9KuWXR1Ov79Q/MfFQKGRSvGd/WEh0ECFy\nRfWgmhfYwKQ7MQ0euEb3o7vOiDUD2kXYXDlWfFk0pOT5kngDGf/zHYeUG6qw\njbuq\r\n=oh2K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGuJ/8pCmauAYFQda29KUysw3PjrRfhxOGzKxrNA2fuAiBxkLXfGoW9yL816YdP/jzCyjiEciX0isli6s0evMNPUw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b760c2b4662b815e121ffd65ef90c4b027cb78a6_1639840499286_0.7648486808725541"},"_hasShrinkwrap":false},"0.0.0-93c5c4c9071946279117e8654b27583d457bd672":{"name":"react-image","version":"0.0.0-93c5c4c9071946279117e8654b27583d457bd672","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.37","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"93c5c4c9071946279117e8654b27583d457bd672","_id":"react-image@0.0.0-93c5c4c9071946279117e8654b27583d457bd672","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-z6GiuQE+YdfGJOTqx7k83wVAT1/ID4CgczMv+rHjsEcymLeboHnPUpdtgyFab+C+CNzLSgB8SYOjd4o06ENMrw==","shasum":"98d934cbbe1211ae25950f66ac59ace94428e267","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-93c5c4c9071946279117e8654b27583d457bd672.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxNWDCRA9TVsSAnZWagAAoAsP/29jjr9QS//mhn1ZJVXc\noS+dNffrIaPJ5LzI+9TaJrHpRKURwE5+VexbuuiEeJ0k7+e6RKoWzOhnhAcM\nqv3XAWVc9gSxP+9prnjIUFytm1dQuI7dk5YGnjEcZcfKpDIbQd+ogJwQUiLt\nc684Z1D1wlFKCwolvmbNAAbTcst4Epc1iMWyko4y+RAjjOpem8FUu2gQSJ2x\nc0TUl4iHNRMkWDon9PubIbaSUgDiTRJLTG3bEmJZnWarXrf4SFwTdtSLqIf1\nSCdpcZzw7mX4+nW8FzGJHIO+kpjkYQjeO/Rjj71N2UsJnpU4Hxkgwi80vigO\nf292Kvpb7NmdqWeOZNvt0rZerZufXhnfZttOuSh5PQUtQY7P7cQzX8DUfVgW\n71VwGa35B+WrwEBwVtSvJ/zcMkfvWb9gAPdSIHYmvo2hw6Thozz8FXuG2Yv4\nLiD4pqyc/CdYoFHvaa2l3PSIG7bO0m8ut1xdALVfTNrV6U/XCKCiWRphT0WW\nJYoEBCrFY5NNA//eSpuaVPvClcKGvLbF6qg8db7XSP1Wx/tjtyuJ5mCRc8Ju\nPh441Gh4Ku9+dh7/ap8+zXjHe65E4GBF2WsFOugibCzZu1yuT0YNMXuJ3IXu\niE0rSpeDQRhqR46lNV4nAfIZBnSdA+SsqxBdg2Y7P6xrZYVKzavmbAudBJ6e\nvMSL\r\n=L3wD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz89+qNsbhGiSCGFa1NkDKBnkanNgEjGJTmoxugeRXgwIhAKYryfffx1GXiSOPn4AS2gwP7cDeEbWCY63bc/7jJ4gb"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-93c5c4c9071946279117e8654b27583d457bd672_1640289667674_0.7677063787428524"},"_hasShrinkwrap":false},"0.0.0-aab2926395bdbd90eefa3772e898646beccb0ba5":{"name":"react-image","version":"0.0.0-aab2926395bdbd90eefa3772e898646beccb0ba5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.61.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"aab2926395bdbd90eefa3772e898646beccb0ba5","_id":"react-image@0.0.0-aab2926395bdbd90eefa3772e898646beccb0ba5","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-EMLGDx4/iabZRTKDkUyefOGBovPe1fn8LiZaKtrqTa1m+NGBjhwTH7hCc6HFjX6VwKPnBRS6Q5rtvnn4dSZ/Ug==","shasum":"2f360d883086dad97b704ddeaf00bbc758836998","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-aab2926395bdbd90eefa3772e898646beccb0ba5.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxk7uCRA9TVsSAnZWagAAM50P/3QINQFixU0/34SWuhOg\naQcYYTT6ZLwmz9gfzhJma3wwzz8cJWRKMjliVppb9JOKe/1c9ngaD4aYiSd8\nr/QMbZOmgOZUPEdZ7WPgC5euGB6JTzHrdH9UHcC6bBQ09ehZgCkduAqBnjKy\nUwhI694SXhH2732XHYVgERNpQNtp28/0NzJvJGntNqyhZxFSuPYxswfcQKNl\nKw0Pngfb/T835aqP4oTFKLvjFqss/uOlyFL+dLqT/FhUdU2Po28AZ2AR4cJT\nA8d54yU8GMm658GeiHytq0ymxKyXIb9NmTIXAJC9SFW1fH7ghEZy/4t6noRf\nZjk8tUYj3Q2LapJUPgHBZo2IOv5rjE/UzVoVyg2imWm1B4fyARcljNkMwJFk\nBr9q/XswA9h04vlPRh2KgtvEXjFyVTyv1YU2ayaS26iwG7ym2q61OuWKRC7Z\n004DWE4yq7YOztegLAn/zLeF0spCiaZpoEGofqjWMeiBzQnssy8fZ0GZfP/Q\nwCWS2NB4PO6kYaygthnbZsxCsG4KXLQRK2MsmOaHHOb7GAfS9Vsu6XZRk5pi\n6CqkeZTMhyBP+FvBsH+7PYs8sTIv8Iaud+g93+m5m23TVmgFFzfqlEAXiFFT\n0Kw/VdeY2PW+qHKLzlBbm37qF8qHtyFutxEESed7fDREOgIuMpvkHt38CvJ6\nJCoT\r\n=THl6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+pYkUtyx1x0f/SqlBtu0JpQ4rQdnjtUvolN5GWKJ6LgIgJD2OcnYse0m9G5bpRm4c5Mbq59MFuTppiqhzNw+mS84="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-aab2926395bdbd90eefa3772e898646beccb0ba5_1640386286168_0.0813116659391595"},"_hasShrinkwrap":false},"0.0.0-004bf5170854eb2457d11ce396385acd22aa4b43":{"name":"react-image","version":"0.0.0-004bf5170854eb2457d11ce396385acd22aa4b43","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.62.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"004bf5170854eb2457d11ce396385acd22aa4b43","_id":"react-image@0.0.0-004bf5170854eb2457d11ce396385acd22aa4b43","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-JoKn0v39S0SQb1klnHIFyXNm2NpZk0rw+dMZ8gFrHenKzmNv4DInm10RFxoaLSUaeVtzp38CIhy6+q9Aqx0q3g==","shasum":"e3a9c812127452c4ba7609c02fe3f70ced41d02e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-004bf5170854eb2457d11ce396385acd22aa4b43.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhx8kRCRA9TVsSAnZWagAAaJUP/A4Ou8x2pUzPhTWhZ3Ln\n2sr9Ly5d+DKlG/99XUBtpSPtRg6di7ozNhxvy40MW/ttsH5XBLpKqpzXD2ll\nVcd+QfkaJoPues9kRDm6cDhVF9UiD9Ic0ZM/6acUzJtQcjugApNmNJz+9Xnp\n2iU/V50shgLgMjCIiL66XsM6o9FKNEYhriZUVSLZbzU7WC2eXGS5r3NwVhtH\nekSah/3T+eWXDhOmV9povt407LVHTasXvB+NArigVIMD/KNsLGdJaEw4MvKq\nXRtfp159zoETEgmeGKldydlVFCseEXPPH5863HWRlmyT+/jDj23g2FVMWKn2\nMKjTaSYOLo9fTNJld6lIZvJv3XANdN04cm3cTUVTa+scPvSDHVD0PWn/nGFR\nQmo1aTsPcOt6SX05Dyw3SA4grgXsNaHF/PdjhCowwKsSxg8W+pHqOJpzX877\nnq4CYkcC7xeWznqxQcnrdLBorCCC2USjx6WGg0NLQDvU0AWMjfhmW2pn4NSv\ndgSDHQDypvsTX5bsHJdQ6uoejDk++CJdU1ZuaCcVxT9jEvZ/zC9iCtvIvyYT\nTg8zGfnakXrfeJn1p10+tX5zEFTGYVHrNo0Dd2dBNg3Q7leCuI2cjW588Y9j\nBO9AFNnsjW9g6x7ZCCC/d1zJ5PiaV78BpQobo8qAV1at5c14HboNZXR40rdH\nmwEW\r\n=xeqt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS7vAKZMjQnvdD9HY1EfkFiRYfG/2uezELmqHR9MIweQIhAOL1FVOTX8kG6fh/DrbWA/ynKwEwjvTYq4FLBIwszsPY"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-004bf5170854eb2457d11ce396385acd22aa4b43_1640483089104_0.08713335531132782"},"_hasShrinkwrap":false},"0.0.0-d4c0fbbaa011b58720aaffe32e34ccdd99e4d334":{"name":"react-image","version":"0.0.0-d4c0fbbaa011b58720aaffe32e34ccdd99e4d334","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.0.3","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.62.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d4c0fbbaa011b58720aaffe32e34ccdd99e4d334","_id":"react-image@0.0.0-d4c0fbbaa011b58720aaffe32e34ccdd99e4d334","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-/EPOqIXVs9OLHcjGov3h/8wFnYrpJmY0JWGUdSk84YsAcZQOZmlBwWhHv1c3eixZwhBmtHsGKZ3FE25HOuY0TQ==","shasum":"84c3b5d084c68b44ea9e64442fc8572fe52d6291","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d4c0fbbaa011b58720aaffe32e34ccdd99e4d334.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzkFZCRA9TVsSAnZWagAA+1IQAKDF40lGrfyxezOY0Wk7\nOzhZXVhBPmtEp+BpX7xU6uemVraKqyOTLEJkufdLbZRlFMxomiDheewrmsey\ngjyWfzz6aCqBychG5Lb9xd9F9mUb3VIwobl2L+wTpnVMT7Y06DlCwVyN2SmQ\n1fpsVAJUtL4yI7RYPto4wt8FFnagQedGmT210gBnS4whGeUYkrkPpfBf9Bp2\n/qW9RU9GASHJXJ9XgAqZuCXPca5fSxxQd9gATf1Awr0fKSVZGvg8siq4mbj2\nLsBv1MY/Nc8nivfxYteWSrUVDTMGwcvtnBNyma7I6rKOiBwKdszhyqFfc90a\nqmYulVSN/qxTVDgfvIsArOzr4EtUSTCjoWq0uRgGCb4o+FSVcgnnkDj6dMBV\nOCF/QvemfRzYeqUMIRb5HPGnYLIXZ1Nh2tn1iPuTKcdVsII/LcxX6gn5qzM2\nWkKFN+wgRQC2hkYGEAaBqDXeN9sbgtxezDwhRepTyB5nPsX47anporHwZV7s\nqmITRLysFZ1E+b1cSamKwIRhbRprW0YDkpNyEJsLt3QrK+bBDm1H6FF8Pjel\nfJsKw4Tx6MJjZtqR+rE3zBfLNZTCBe9jcdo3FfSjcdpePqew8NtjRhTR2497\nCsgyvb9/mMcvvysL2ulOp7T5x1oM9nCQ0jBZLo1nTMYw7pWl5PwKkDEx7n9Q\nSmpW\r\n=c+NA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvgxX65LH/55rtipkWGGv9PNIZy69QxqmsBLUNo7fdVAiBDuI9zYgJVyrdtYPB/zRuSoS2zbjeM2yT+hcjn44yGbQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d4c0fbbaa011b58720aaffe32e34ccdd99e4d334_1640907097273_0.1524352954785344"},"_hasShrinkwrap":false},"0.0.0-7b79a200ca44e2c6b98c27bd44d3448978e4f8cd":{"name":"react-image","version":"0.0.0-7b79a200ca44e2c6b98c27bd44d3448978e4f8cd","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.0","@babel/core":"7.16.5","@babel/plugin-proposal-class-properties":"7.16.5","@babel/plugin-proposal-object-rest-spread":"7.16.5","@babel/plugin-transform-runtime":"7.16.5","@babel/preset-env":"7.16.5","@babel/preset-react":"7.16.5","@babel/preset-typescript":"7.16.5","@babel/runtime":"7.16.5","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.62.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7b79a200ca44e2c6b98c27bd44d3448978e4f8cd","_id":"react-image@0.0.0-7b79a200ca44e2c6b98c27bd44d3448978e4f8cd","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-AFT+pDojYtNRQSC9VUDH/qks17TKnUKjgWwuE6HZ4wT40c/DR+/t8SElSK/gD2t7oFTCA7CAKTFX/ruquVeEDQ==","shasum":"7cffed60773cc0c696670706163044555a504741","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7b79a200ca44e2c6b98c27bd44d3448978e4f8cd.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz8zSCRA9TVsSAnZWagAAuasQAIdO0wOvRZAQRqLDIoHL\n+7QrwPRFvERiOpOjsm9XMgq6xiPGGuHZvIVt3Gvj+FxZ15UuZtiVc4EOUjts\nrLdGsrHBuuC5Y2RRQstfwNzbCyluCY0JPvrgCyC42aZgtarvbHtVQsDjYDEo\nR43rsBWGHzwgRszq1d5aglm6xUrh3SpZ28jWsBV5z867LtQkhuh/6fNZ7UJf\nJ7z9H6PQAPLLsKYMyfDQ8BkTmdTFRd9sRcFqZ4963PlqXVDL1vl8UmVZ6Dqa\ne72sVK/pT2sCQxjvAqB6DZhnTESva1jg5A4Uq+CRK/ybZtok+ZSVdJfUv1xD\nVfz4FTLVWlovnSX/JehVXrV8Kk3RrSwokzmFXOaxitsRYGWScqNRWOnF2SfA\nIvhw0cVvTsr+m43Rk4vVKFCS5/mPpfHJ9ul0UFGy3v9xreBNI3mnOljdm7HC\n3O0MVuu/dbPFR0u5RYsuWfsMMpUAgsV7LebuV+iXSEizFGKlSzLrlCacgSwd\nZujiLI8ZR+GLVqi/4TtBjEXHGB/cPC7spbvdYDMcnO9ooALg9ZKFGzbtF88V\ng92NoH5L3Uqevw3s7FExqRe7yrgoSoJ7iRicr1xllSb8yYR32AtHSAlO2HRX\nXE8gDbQjLmSZByLxlkYM/9tJs3wP9nRSji6K/VvV1BS5JQKqgnjsGqqdHjkg\ncWL5\r\n=zRkz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+XbA5ioqpdPhnr5AonhaRw6VjstTVtWH5v0UmZHRARAiAoCfhWC+hoN+vOFFfjRZEIt9LAS6vtnoNKd557jMh3qQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7b79a200ca44e2c6b98c27bd44d3448978e4f8cd_1641008338458_0.7157013598479822"},"_hasShrinkwrap":false},"0.0.0-13677b5121734112f8dd8d54b43becb2eff98b9c":{"name":"react-image","version":"0.0.0-13677b5121734112f8dd8d54b43becb2eff98b9c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.7","@babel/core":"7.16.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.7","@babel/preset-env":"7.16.7","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.62.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"13677b5121734112f8dd8d54b43becb2eff98b9c","_id":"react-image@0.0.0-13677b5121734112f8dd8d54b43becb2eff98b9c","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-5JxB1o2Cdq9OyJJaGEHkTHccV2RXUX97lgNhHBzLAlrrmdq/hyMM1MkHglYCM0P5LX4sdH3tysSitd4DvO5Saw==","shasum":"096fc69299c503d2e6ac1cade6fa29cb48f8d7c4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-13677b5121734112f8dd8d54b43becb2eff98b9c.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz805CRA9TVsSAnZWagAAazYP/1CNnpuw0pCrGrZZ+UIq\nJDyRuDSyr/zBkhTkA65IeK13MOXYgJY89QMTMrPiHj1iwA9gdbjwWRjMUMAq\n/ZMocpxRdtYavFhz6avw3X22WxXsUbj2alN+qlSzhemjE5BISOublU+AA7G8\nDhFDp+Sq63Bk6pKfBd9AZ8FLGVoCOG4cvNtjr7Tib0g0JM7QSbYSsCHkbrRk\n9lg28sJdSpAzoaET4AlfuE4ZRaxuM3WoU6t3O8rrqQSW22umCpf2tWs1Tnml\nI27AWXwuKCAobskYTc1VbGdRRzwX9cLDpBgRQQqIZ7fbgrqoEw5xgiZ1aXYF\nObALNy8B3IT81ksS6lUiFmX1XtWHVDLOgDVighCkQ7ACl9qToblgcX5pGMnd\n403HvpmL7yYRE8iriL/dCke+RPzs3Q/3bc2K3P7NJpk153MfX8xYCtyv3WGo\nvWcrL2x16Cm9LRq+rvxRCROD+gcOvc7kJd5eZ3651D+ZVWBwo1dq6ZMr1RF4\nD2VvlSsg4iABbuQTWs03tNZnMt1X+kLAK5L77dj0kNge5FKa1FNsl42/CIAP\nUzdTsBQnnSgTcsB5KImpLU9fM0kxhh9gMnfFx+y0qlC8IVTNmCZdE7DvWghJ\n1wVEAQdLA+hQ88JIwe9HhLqGJGPFZitOdeEMDOSTE9CRMoQpMwM5Oq7pgBqz\nry0t\r\n=nIFD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKAbBatbUq+7djfi4lgKCP/JuR9aNcYF2oQFmdEvmnZAiEAw/bUI1hpscQmno4o5fIZ2Pl+wNcuiYjYtsnvsQjSf8s="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-13677b5121734112f8dd8d54b43becb2eff98b9c_1641008441373_0.9606601045607082"},"_hasShrinkwrap":false},"0.0.0-8b6083c45bcb6a6aa7c58f6266541b428acef050":{"name":"react-image","version":"0.0.0-8b6083c45bcb6a6aa7c58f6266541b428acef050","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.7","@babel/core":"7.16.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.7","@babel/preset-env":"7.16.7","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.5","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.5","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.63.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8b6083c45bcb6a6aa7c58f6266541b428acef050","_id":"react-image@0.0.0-8b6083c45bcb6a6aa7c58f6266541b428acef050","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-HdtEDEYDOgFnh0p45S7OibNXmDPWySzlOepJXqv16aakeZyBwy6hFq6FTebAkD/Eux+ZKUdRMIZWfB+xlU4A5w==","shasum":"bb3583fac019d2889b58595fb206331e66d55b87","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8b6083c45bcb6a6aa7c58f6266541b428acef050.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1aE0CRA9TVsSAnZWagAA41kP/1G7rZLD6V+e3qzlfTxa\nkQMTUxVWZgAP/8Fq+Ahpc6ecjcQsrpV4M0mZTZ6OwzyJxvMKWo1ePmMycayY\nr5e0bLcB8sppABnJg4kD3T4LTisLCr5Pkz6FqFCT13T1sXNE7Hi2tcWEPW4f\nuDRZxiSrK3N1SOa2NuPvPOR3DHM6jrUKBTOBIw9MpfCqId1ppvFeTKSBHlCR\naR3UyJzF1okgyNhP3/MN2qK2gsq6A2sQvoCHDweOp7/iugVjml+fzIBIVcZR\nDpMzrHJSIElGOHing89DHh6uuij9DKWiBKzztcRdVmGrAxKEdMlTshG3bl6G\n1FR79GHmcdfbssaucweqf/dYiHcZS0fF0eeGPAVtpw0Bs0paCjujmzCO0kX7\nySz5lkDjDETa19W5iU7MedxN9ogYdiE1UHHUQUgFleZeN5Oh1+IEWBdbD/jH\nIvEIBur5B+1Deq6jlsDe0V2l8DHlmF5sQMisABHUzpPdrxvbC3cJUmLKJ0Pc\nBJO4Dq40t0PPBysv4N69yYpMWECby1XSNsg64CSzsd/CEZXIZz245ueAcDHN\nm50xQIrCgNSapdhn9y7rxgwWA6ukpXEqUNaeL+dAycKBjhQlNQSrHFZGIi6l\nOeMI16rNLrxpHpIB5BIbbaiD1p0uSqV9HDjWKFYUpTHDHX9nvjf6lKYBW/0s\nigXW\r\n=nKIY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxFvw+/lTVTUb00rwzagegN5GAtbtTwpYUvlOWR06WwQIgI2jD1Tid755Dbh4x5c3Q7zIufy6v2vACqc7CzhtJjx4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8b6083c45bcb6a6aa7c58f6266541b428acef050_1641390388011_0.29143439206699884"},"_hasShrinkwrap":false},"0.0.0-7e9c96f1825f1c50f415b0f7eb520e1a19b202ef":{"name":"react-image","version":"0.0.0-7e9c96f1825f1c50f415b0f7eb520e1a19b202ef","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.7","@babel/core":"7.16.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.7","@babel/preset-env":"7.16.7","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.63.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7e9c96f1825f1c50f415b0f7eb520e1a19b202ef","_id":"react-image@0.0.0-7e9c96f1825f1c50f415b0f7eb520e1a19b202ef","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-CwPIwrR6QUwm2gFGF1RnDhrbEvy+k8AD/XBHYYvsZYmo+CPOxoYvBJK9XhTp2hDKIAbkek8k8SSkDz9J+QRoyw==","shasum":"eafafa9ed5ca8c87c708da26892357fac10a58de","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7e9c96f1825f1c50f415b0f7eb520e1a19b202ef.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1zBDCRA9TVsSAnZWagAA57YP/RHlKrVU4CeKyIxRSU5k\nH3+fqqqnXMYL6xI/algb04XP9sQqrR8CfQI6W9yApOjvwet7I3cjSEo4Jtu5\nnrrmQs6EK3H4wXvSXs4SiIQSPFdpAuf6mJpddHR5WadZHuSYIdafsZXk+PDn\nC2IIeU2AipgNYqLfuYBs8PWCasypEQbSEZaEDChvlaQEspKGWV8Vylf9zbsA\nUBUAET7Wp30FkPUSLyCPOliKIrcWbNUcuR1RgJ0/F9ei8kqsUa+zfWm/c3Wq\nQAM4WthoWSdpMeZ6tcGCLe9HPInCWBXBGZNZEf+TZBVZny6hgY7edr+320eI\nUT/+0IaFZA5jPeTkMSsmFqRAe4wRhjSLi4uUO7KNUrUGpQYaf4/NEU05j2PP\nVf4ndRrhZcxU4kAYNJY9t6opylccVBh7zMjEI/ynNe7QprnkY6/m+X80ljpG\n2ihyIqzSr/swwa6O5l1YHjWqOat8QpQdwQPX52s63uC0a3lSVsamEtOzJ8aJ\nh/yjS5tGPka+7U3j5zLx+8+RvQTyUDNomVox0+UCRqVeKww6g2pil9yjcHz/\nXg5t0ZE6SqhDDAoa6OSWq+/jD3CB5rSwabwU+Qs8hh0Wz3/HfCsOKs475PF1\ntibkJQA62OBvwBc8Zg6xlJojsQd/CvYhcJGTU9uOuAfjYtaEOJPpNkTMQHua\nw4x8\r\n=TEgJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM3t/9jBR5nd5Apc1ObDpRt6dc+zcYpEe/CrYYrnFQ8wIhAN4qQL8J4jp5PxrRec1XfmsyrViutYMSv3RVk0oJFYdj"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7e9c96f1825f1c50f415b0f7eb520e1a19b202ef_1641492547232_0.6715161767269873"},"_hasShrinkwrap":false},"0.0.0-c1a55035a96a9c79def97593c2a236f87e82c22f":{"name":"react-image","version":"0.0.0-c1a55035a96a9c79def97593c2a236f87e82c22f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.8","@babel/preset-env":"7.16.8","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.63.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.65.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c1a55035a96a9c79def97593c2a236f87e82c22f","_id":"react-image@0.0.0-c1a55035a96a9c79def97593c2a236f87e82c22f","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-jd4Hog3rkHw/YnFGQO1Xwp7yH5GUpppn/1Zn0BlGQg1XMvaEJ6nGA6jHeFRFkxuPz0QwemikOMlD0070SId+FA==","shasum":"845080c6ff26c28f3475d1ded6da65f2906b78b1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c1a55035a96a9c79def97593c2a236f87e82c22f.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh36t8CRA9TVsSAnZWagAAkxYP/RBh7JcZB2Jyw6EeDpgW\n/pUBJQoUJsS5htDkxegaL4/x70KYIk9vexnHYzoskqOruC8QfBHGKWeSuJD6\nrPmr65sjjVyyoiU/uLqINzGfZpO222dXy373pDZIzRAeaqIK9UrmKBqOUDmb\nkNKhtFwJoOGVIcfVCIl7uYoq/laRAIV+FEsE6lfk62lkHCVF8Qz3jTty4yFE\n3H9cYAf8wmPK9QU5iggiuAvU0ctsMM34+Lkkv/DEBUHGGSP+o8CW1o6/IAOe\nRqsCBIhT1UsDzS4LIL4yJGEin46fq7Fsq37EVBP6g/P6vjbpBEwyNDFuuDJ8\n6AJgXTOcbdyApGGnG3FnRDTHtXbeoZ93B/5vFRduUfv0VcOC8YyJTKc2RiL4\ns5vfkaRNWTNFWEOLvu1+7K2Xiw4BfvjYYd4oLcwQEFEAshd4ll0Me9+VFulx\nkokD/b8y3qH4PI7Dv42M/4rOKpHEyPtJIS7KHjXBRhIvxOnkTZF4rLgA6dqr\nCfvpgDM5KWOjY3RcORuzyyZqZEp/DCCb/lPFbR5ZQJzk6yXGb4rlDv3eOy42\nLTVLFZnZBEQgkHzS6RcibX+bYh+xh9wxAFr7gFtraAuLjWGv+NVQpU9m0LZH\nd5bUt3UN7KcxaNSBdW40C6QyHVNJ7EF5POQmFLVzziSJOZPY7seov/RqTvxN\nGDFO\r\n=AIkO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCj8CKyXuzVUxxccK/CkNvxee+TYwm+ARz1j1SkpfIRogIhAIFlf1x6RzquE9plBVGxDsEnemICxPaTpzDUJJPx+X+x"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c1a55035a96a9c79def97593c2a236f87e82c22f_1642048380647_0.28232223800585654"},"_hasShrinkwrap":false},"0.0.0-fd943101124c0f1ad0cc19fc9b711eced74dfe16":{"name":"react-image","version":"0.0.0-fd943101124c0f1ad0cc19fc9b711eced74dfe16","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.8","@babel/preset-env":"7.16.8","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.63.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.66.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fd943101124c0f1ad0cc19fc9b711eced74dfe16","_id":"react-image@0.0.0-fd943101124c0f1ad0cc19fc9b711eced74dfe16","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Q3QhSRdbRJ5//mLAGTzA1irmxRJhApC0gXHgFGzmn8YCl3lDKOAI0kDBn1Ag2DD5hLIxL/4ZDREyUnBRmfzT8A==","shasum":"bb72761ef6d3b3374a9b2c09a5aee7f30dd381d3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fd943101124c0f1ad0cc19fc9b711eced74dfe16.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4UP1CRA9TVsSAnZWagAAk20P+wdsabF6gxzN5AyxIiWB\n7aclHghhh0fNcW3lMQNqKcIivBQgUdm6GyGP6tF8Z72gCPzQQ7dN3QAan3aF\nt79NnjyF30k3YRfCA7+4R47361wRDIvg6P92dzKFeVAzIwcjNXYbrUjVIs+C\ni4LB/KpfB+46nGSycmBmvwvaeXLICCJsGrvMrPSCa+5g56t2zMV+X2hcGI3Z\n3HjowA/kriTbkdDofs/DOQ/91H0IHD80AuRkRba46CmI4cI6okNpRZBAi/xD\nodaCn/kjJhk+DrZD8m43fkz/GONa66QmiU8p7ryS5HfJOdow3YZhvU+MTxQn\nwOXJAnQvIDVSS1c/XdUPp0gFUU4bIScF40y2bzU+eULiTPmGEtsocp1yanYy\n54IpqlGrunaZD4osN76R3I/pcEV2m7lRhuMKH9CmgHqV0jabO7T5AQNH7n5R\n+/h1J4uidjxL62lvZ5yB8bXmvSNy+g1B4whS5vZ572oOPjkf6D7QV4rV4EI0\nhuw5tC5ZXUIV2bTMP1ibwJ0gH252m1WSozljs1wdZdFIwYp0/XPp5uGlGy9W\nI8mjilImyt60DXClFpN8UR584i27IYP8bl1g9WOAxhUFJc5n+AJYrzuNDJAQ\n7O5rNcaIVH53SHCVMPigNEBzlumn4CQhqF24Z+FtR7twDG0jZG3QKJrKBVgZ\n/196\r\n=1vga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsnXOCvV/wFBT5NQJcXGEqSn/3zdaylIMYG+vzHHqyHAiBP+bE46P0QlI6Fmi9gfoKYAFYBiyfvZm3p3xuW63PZ5w=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fd943101124c0f1ad0cc19fc9b711eced74dfe16_1642152949524_0.5345791147886028"},"_hasShrinkwrap":false},"0.0.0-96c613c945e90196f9380cc23f2198efa0c71c07":{"name":"react-image","version":"0.0.0-96c613c945e90196f9380cc23f2198efa0c71c07","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.8","@babel/preset-env":"7.16.8","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.64.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.2","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.66.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"96c613c945e90196f9380cc23f2198efa0c71c07","_id":"react-image@0.0.0-96c613c945e90196f9380cc23f2198efa0c71c07","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-8FZePkldn44vOib8JpEsDv048YcYN5jTwEIrmpsT33MtktLIG5k+0W5+FWnTe8lfCs3i22XL1NwGuGyKnZkfWg==","shasum":"e5b9d93541da0b5a7e96e611993e5197171c9cf0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-96c613c945e90196f9380cc23f2198efa0c71c07.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4w/1CRA9TVsSAnZWagAA4o4QAIYFzD9uaF/IGk82K9uu\ndxxcMKjO1Yj4ylxh6MlJLfiDFFBAiZpF9a1Pdpca5yk4IRO6NqSyXgM6aLHn\n29dNCwq0KTKADuc+2ET1ud9bQ35EtqHPZvIiSCnkEE2tjx8peKdNvi8IcKJ6\n6W5PvhyUWNnAje/5fEDh5GnRng/sUiFtdL3Xg+QJx3qrs5mAy4g7NFnyVFKW\nbUVgqjyW64mMEbUzY6iKJC7ruO/0aGvnc/gMkLxMHGPsuy4/cjl3CjudeF7J\n+GpRo//s0Nwqi+x9CPsgjoCmbXc436E2ZUomJfdI9O7F+rB134LKaJ3uvX14\nCDUXZB1DtX4jgwMZS15RUQvslxaFOenL+hBapAlC2wpN6/ACx7MFnRCk8lMm\n3Ll6I9nNnStM7t4B9RbOmEqXuf38uajEcjnL5NCG800I3ep2mNW1Ucpdyppt\neOvkQAJt8ee/DdrM2yM61a9VqwRrcVHMtkSpVjzxfQidHcfAGLGZ7Xk5EJ5C\nX1oEkuwV9O0asVQGELnwITQahB9phunvuKotBNAQDRaxn55HcDOisCYxojyT\nYibA43Vf41lgaFc2qv1bTHNdpAUR5/+Nr0CTgdOXG/6x3qHGvE04kfc3Lhnb\n0NdhRYRjjaVgrS8KpCqqgt6a5Yl2Um46iQqRDETS2ivdQviQAPpW25Qq6k4L\nt6T7\r\n=2Ebr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPdqEfTMvijuqKZy7r31UL2YjYeLOOvzG4fzgTJghwcgIhAMZmEakjpK5QiFyRxoOVgpslteKpYxeEyJ6Y8nI19iwQ"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-96c613c945e90196f9380cc23f2198efa0c71c07_1642270709201_0.19902097777794037"},"_hasShrinkwrap":false},"0.0.0-f6c55186b0f6a5523456ccea9bc99450ad5fc1a1":{"name":"react-image","version":"0.0.0-f6c55186b0f6a5523456ccea9bc99450ad5fc1a1","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.8","@babel/preset-env":"7.16.8","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.64.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.66.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f6c55186b0f6a5523456ccea9bc99450ad5fc1a1","_id":"react-image@0.0.0-f6c55186b0f6a5523456ccea9bc99450ad5fc1a1","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-wztEasqfBUgD52bdUfnCLRVYs9axpwfVZ3Ibjtc4R54jveiImlF5VdPg7k7ipFloE6MCESjAdahKQWp0WWnSuQ==","shasum":"72043f1d3cbb06968dabc9b4f6e576e0a731bf79","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f6c55186b0f6a5523456ccea9bc99450ad5fc1a1.tgz","fileCount":20,"unpackedSize":40442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5JTXCRA9TVsSAnZWagAAuW4P/RxLtHTzz4hGZ7iFJ0J8\nTpOVy6ciut/5FkB1ZgiHEZAAKbWLcrE4KDoO8AiUkLRnkUALea13EmT85hPe\nf9WKwX0lVo+6MCcQIra6Xt6EVyH8rsHMFRbRy/TARZgGsqPZV31S5ZBno/vB\nbsYeaMBkNm2Rf+nsY9KqsVEkcsQPsKqg+0BL1gqUerlNCAVqTJk1defVo+tN\n10yQMLk97OIDjotnYmLkkPG7bCID6EBMyNYgIXlCYDtOMilBMHn/Xr1g0ceZ\ncmpSdUd2uNp2Uv6dPrGdNnMsVJ2/KfxFKX+4vB+zQibuZUTTJhGDQBhvq2FH\n0fuNH2ju51OnJ0nmQ60j8bYtzQY0PU6j0TvAXKs6PE2oz/QWjQWXEiUYljs6\nasBdcDTdnCLxm0gKWSJ9s6UlD+mDXVBPQsbOIl6P0TueZQ8d9SNiPO3QDMxG\n+0LZZprbKuB0B1qRU5jD1wHS1jmGgj9c5OFyF4DWhHSpDv9efKKd9T3K4UjR\nMGSiB1nr5Lr2lS55aWX2WGXGgs4ygiYsdcyzXxqCdNLPtQEGUQkhuW1DwLE5\n5lR8ZfGVA+uMnbXWI6YHb7RzTqz5G/RkWzDPyI6WCobnJEDG81dVqplsjKDh\n4TKxcprUyHJMPPIq6sweLZiWbX778EWhRnTYSbRop4nnnvsKREN0n0vtOG35\n0W++\r\n=x+q7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGosP+gO3hodUYhqFCYBnnYURYN+I5zc3Spx4R+qzSW0AiA4DVCYJZlra9pbuGoto52ZtnYZ2pCVZ3bMCivAYwwByA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f6c55186b0f6a5523456ccea9bc99450ad5fc1a1_1642370263348_0.7387838824438642"},"_hasShrinkwrap":false},"0.0.0-70c7b288ce3d4e13b03b6f7786b065507a39f29b":{"name":"react-image","version":"0.0.0-70c7b288ce3d4e13b03b6f7786b065507a39f29b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.10","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.64.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.4","webpack":"5.66.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"70c7b288ce3d4e13b03b6f7786b065507a39f29b","_id":"react-image@0.0.0-70c7b288ce3d4e13b03b6f7786b065507a39f29b","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ui9eVE7abwTQ6TkOmquxNPlDOIn1aA5GTpQCHSXWD3mU03c3xvFBl7M2NEFfdbeNQ2IernX56Bb3bobFH4QsrQ==","shasum":"6d3a8930ff169546f0e4d92ccc2081c50dab6479","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-70c7b288ce3d4e13b03b6f7786b065507a39f29b.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6wD4CRA9TVsSAnZWagAAIf4P/1+U02QLqjGFAB4FxTrA\ntrkOpztyIbbrDcWyuMX3PiMBAZbRCXPKRKkirCYPpPihbvfDsAvrLZbUCY6I\nUrlODjDdwIasuiu+IOQGJGxOLt7vr8RGBxYJWR8hjzBsOK3Vru3NnH9rW19L\nrGgMWlpTYJsRcoadIrAREnh/vPBPkaUEhQWKYcKpp9REYdNwBW1pbIxXJJXX\nhr9ozjNLo6bAzW1rfrNGikTOtytLHwmNOPvPqFSvpYB/FlchFmtWNN3YN8QY\nP4DXdjVbQSh2a8TNXTUIsRLthINaMadsX61p4qSiniG9nnkK61rfuI/fqOpD\niTHm2pupyeIblV6tDO90dSyHTtWuTsIwL9806I9TaRncMgYSWq3ljl8BJxOm\nqCJYvaIyG2879Vq9OjoGfRcZyeGjkV+RZ0I2azh9kPYhJs4iBrKInlDVWpd+\nqU7zLtPW1rrzcBNsv+12wrDuWgGL80DS3H0b/NwN64u8kmoXWD04TOLN9GU2\nG9m0yH+9VS8xi3ikaitpuCGU3NA1VIPgDBJ3lrCVdIcuD17Ow7Vr0Cou39PD\n37XDPecHWCAOD3r2NyxMq+EQXpZPJ/BzwvXhX9hQHiJg2R474J62culmwt8g\nD2acdb6eQgRcrvT6KECrGkHqQzfVcQIx5//or7MS8T+nN1N2fH22ilphXERN\nBSjz\r\n=uFy/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+SBuNo7ADxmMiquS0C9gCYFbw2yPnMXfnwDLCPffYWwIhAKPB+2XhcvRnLo3bnF/Wmu5mpBYngUhrB99LaEOOx/nM"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-70c7b288ce3d4e13b03b6f7786b065507a39f29b_1642791159970_0.8590197570575457"},"_hasShrinkwrap":false},"0.0.0-c9b95520b3ee888f9baa7f7f69715c3a320b8e4b":{"name":"react-image","version":"0.0.0-c9b95520b3ee888f9baa7f7f69715c3a320b8e4b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.10","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.64.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.66.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c9b95520b3ee888f9baa7f7f69715c3a320b8e4b","_id":"react-image@0.0.0-c9b95520b3ee888f9baa7f7f69715c3a320b8e4b","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tBR+CKoj10bTXc2jvg0OOZG6WOoyyak6+7w8J3L/yEygob8HoV7ob5seQYO+pIZ/cdmvNjDOY4irUUa7/29PYg==","shasum":"17ae35fcf172c8b8296b7ce8a6c8337c593e7a02","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c9b95520b3ee888f9baa7f7f69715c3a320b8e4b.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7IOVCRA9TVsSAnZWagAANhUQAINkOcbNwy5eu8FiQfJs\nkOIYdlxJM0WbA7zqWEOSOqTU3emOkFsRA/HtcbotXPJ60aXGcpJH1Kf5siPZ\n33EAKVJw2+d+ftZ9WahSBNvDot/c2S56GCX7KOvdjGmv27gqgofdwptqkRZW\niCjClm5281+dtoVpjZg9LbhoZ18y2V4/kl/Ms3lmNNy7rXDcf9X9fxTfy2D1\no8pd55YBX59AzMrWRd47wTUosnOJlQsLdXVVdRBt1GpErK2XpUHy85wlKoKm\nT6u9GgAROCqfjc1anCyG5AefyO4RZ0pB6YjgzWcj4OccTv/0uyM+bXNfOHOQ\nQ8ZUmOAgK2zMMO/NCJm4Z9be+uJ00CU6xgE4K47DPzBCHDVksyx9GLu4YgP+\nrZM7KBeHkfrlEA3OZ5fiESJV4XC3E8zcEeuvA1KzpBwUifnQT/nKyS4iUprW\nRhczPyWD2CFtgAioRNrppaLQn8xuiMqmYcfOXjDg/3mI+vpKGT0XMknTVIHM\nWGQcoMLXMNFgvpPDTLzgpwSGfDE8yJK5i0G/7no1nWPQJ5qyzwLFSnpFBL8x\noi0zi8QebLidqFk1Zwhb/rlLyfVlifJBRr8rj9sAMwloWxJtCDcHvqrIVB12\nDk0LjK8EtZPMd3Oej/xBYlP3rIcaOF9VtCTdX6FHPq5X85zRyZsZ56qB8BVS\nj2Lh\r\n=4rvs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDf0R/77dmHlhHsDx8nR8s0J6mu3+Rt5XwRRIzBoKjk8AiEAnbFMvmczMt7sl8drShiJk1XSDse0Y5ag54gJ5Ush9oA="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c9b95520b3ee888f9baa7f7f69715c3a320b8e4b_1642890133631_0.07152254979353101"},"_hasShrinkwrap":false},"0.0.0-11fc16ec8f8020203b4cade9f2ddc537cc9e7ae4":{"name":"react-image","version":"0.0.0-11fc16ec8f8020203b4cade9f2ddc537cc9e7ae4","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.10","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.64.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.67.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"11fc16ec8f8020203b4cade9f2ddc537cc9e7ae4","_id":"react-image@0.0.0-11fc16ec8f8020203b4cade9f2ddc537cc9e7ae4","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-k1KwQblsp4PgeiOMb/DTlKSOy5rbU86JhRGM21rtNyOMgjRBkoxadRqp4TjEJ9A/uLjZHjq0oYTTrVuJYpK34Q==","shasum":"1368ca5dbac259eb10e9cb62d739e6bd28e33f1e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-11fc16ec8f8020203b4cade9f2ddc537cc9e7ae4.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7IQ9CRA9TVsSAnZWagAAZAAP/iRc8yc6paruieKM4PlX\nmXqfYDfQy1gqJ9Tb0d+SRGc8oi63t0R2NsJCb16WQpr8R9au5KdHaYp/5njv\nc5+nGxKg4sbAYiOW97hPJfyk1yUn2fXyl2hy3UiF6ZZUBp4nTNJcfGd9FXxu\nXoqtWAZ3/X95F6qTFP4fA3Z7SrQDOnh7vDDvBTVFF/iheQ/7zOEwP5/wSiT8\nMqSDMkTE5SfI7n0x4NSVpb6q6KIhGIsiMzHYBBFIaQ6Jk6bnrg3o83PAt9V1\njON74WTU0Cc4ZFEkRbG41fw37uCIphI8GnStJBrq2+hjYUIyVklptigZD2Ko\nDTpZZmqRQ4sc1taek96o8s+MJBLvE1vU1sKeXo2xAuFEuL7G4XqBNM+kkMic\n/TdWZifSA72YRfUcWR+tefVXBsspy+TKY3dkynuJ1timaTPgU3vkd6oXey57\nUq1RG4DdcQCMGTneuZIuVI0kXpqCDilKqJryzCuvmMnzoeQ58wPNTJ4RlCye\nIxemzO8A3sjvuhdkYuG8wABd7GfL27vtXSNLiQuznaoS8xgZHYcioSgZ2JO6\ngqi0ySb8EdGm5Je0Ktpk356NlVSXr9tOxoBlRsm3YvlrCkX61Z3us6C/2szf\nAI3+df29mTNXoMAKqwXZbJmJAvol2oBjhi9b+a0YM0pnIUKAy1owmkNGKN05\ntcc6\r\n=6Ut6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBn+s6oNVX7rdMSF0TQnJZyBrUk1BrppUtBODplaeuzwIhAIJisRFMitrunbW5jZdOokL3trvrAGwU2N77ghRQJ81p"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-11fc16ec8f8020203b4cade9f2ddc537cc9e7ae4_1642890301620_0.7840453809428078"},"_hasShrinkwrap":false},"0.0.0-71cf2289760a73b138b1873c9b6649a31d84faa4":{"name":"react-image","version":"0.0.0-71cf2289760a73b138b1873c9b6649a31d84faa4","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.12","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.64.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.67.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"71cf2289760a73b138b1873c9b6649a31d84faa4","_id":"react-image@0.0.0-71cf2289760a73b138b1873c9b6649a31d84faa4","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-x2M1PrzwoYTj5mRRPJPoY55m+ZKJOHtZFyRN/iA1RnDjy3hRs47RrX88DH0RRxdXZPKbw1JIkrfCzxoehV8KNg==","shasum":"5199ed87839a4fa964c09d14de87b6ceffebb266","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-71cf2289760a73b138b1873c9b6649a31d84faa4.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7g9mCRA9TVsSAnZWagAAQakQAIcmP5GaHkIS8teMQUf4\nA6T+Lt23TH8Q901RS3cqyHyT0L2zz4Hk8PytaA+y0x/ZFiHHBAnzNUyDFOXq\nYmhwYv/u36Fj8Myia15lMy7hqxnza7sgbPZdNfQ6fBBI0ayXpKQAiQZlnP5Y\nwwR0r48Bg60Oqw2c/RgZMK+jsoUle/BK6dqiSZb5cCgx8z8xgDW19HMW14Pm\npwtAKRdMqfuJi+DIogWixGh2R5SoFauo8IFukw88tQkjing3mzoVFvTh4d9e\natmg88sdKL+Zx79FbqhpEtMYPAE5tLKeY9L/b0e98mrD9WifjOh6ibKl+wB5\nx9r2StvIKoOJibL4ZJB7rb3g4cM03l+fBGNQqrGHeXqe8U+zvzAiheoTZl6i\nKjuotd1qwF8RFfqAtBMvcvhXy9+KtXNP2pfIXvcwaFt3vqQXxAConnv3PeSU\njCogqhnrJMVsM/iADRVfh3JGMty1da2A6MaUcHN4ZqBFLsMaUu3tIt8b1e5/\nlOzK8NArVaAWKmoPKpvqgRh0AuiLceIuURFIoklkldZctLHiDXyewIe+cQLQ\nqQRv9phLa626okUStbkYI6qIzCOL2CM23Sus2BEaAoz5vys/jcf9gIUR2G2B\nvDS7tN6MPqWlKEGZlkB5S93rGLaqnSRIJoH8KwzrVo2kt6CKnNorngpJbPHb\nGwN9\r\n=2wBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrIT5/SErVCArqfpqna6huOmdzApn/GAUJTahnwIOjzAIhAPKLkEc5Iw3Ib7f4ppCBosC6pNiafspEJO4pJTcJKBte"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-71cf2289760a73b138b1873c9b6649a31d84faa4_1642991462646_0.23082835624671705"},"_hasShrinkwrap":false},"0.0.0-966d2a7c32e992cbe9ebd8bb07de093fa892b6da":{"name":"react-image","version":"0.0.0-966d2a7c32e992cbe9ebd8bb07de093fa892b6da","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.12","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.66.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.67.0","webpack-cli":"4.9.1","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"966d2a7c32e992cbe9ebd8bb07de093fa892b6da","_id":"react-image@0.0.0-966d2a7c32e992cbe9ebd8bb07de093fa892b6da","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-u+Qz/97JWRKgrVgChpy7pC0eYA0LbKNbe8J6ywBtDdg7HIW5XxyR7Ikx/fqzffw99MvYzMNLy7HaCfRBG2/3fQ==","shasum":"7d0e6d0cd20622c427384233c97216f1ec6c9c05","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-966d2a7c32e992cbe9ebd8bb07de093fa892b6da.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7g+2CRA9TVsSAnZWagAA/4EP/iBVoR7MF1n6y3B4VeHB\nMl79GyeEFicVB3iHPCp/Sre+8ipULKl/TL24a+UCC8c7UK//L7IfyfeHXNZg\nAP6oPVAm2ThsqmiozcumPCFnUpK5ee9riVLpd4HmDQIQz8E4dqJrCUv1prvi\n6bTVX8zTvsB2AjHFz95s3CMajMpZhdhj9sKf7NfEEqWtdBBQSM6GuM1K8D6W\nSzFctr1tILmZK6ZhF8k5KoxgCJ4cMQBtIy8Nsx2hqDIDDT0lu10oxKVegTjU\nVCU8NCEFi5qpo/WAJtPKAC99dMgpv7edV8vg1s5nzSZqP5GF7xhRM1NuS1BO\nIkuMN/y0Bngoc0/PMvDk0+sXENtOiqFM0uF3MpPhaDChI7PRjVKWQEdIh2gw\n0bmdTkbuOHubmlWeYQcBYZwXeZ4V1jxaPxULejlzrhYbbTLRt2WO0U2jrTqa\nwsx2bL/eUjp7a62YaUnxgkzRbg943wOfC118H2hkZjtmHagRdI185DT3mvl3\nDxVThfFV5402/0XAA4/3Nemt0nK4FVCQ/ei4uHxURYC/VsMfmKQg1zP4qCSb\nEPA16kFTb20tDrC2z/dqRySAGzRQPXcgsJFfaoMRwYIDjGlE2dlhAzbxe/66\nLtocJzLSoXjSbQaXqg2v0jIt8r/9lb9nEGoL978dIfVLASm6obwKs7wSA7fz\n+N8H\r\n=rTpS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqTOdKoBmrR2jtNTlma58F7e4aoZvvl/no6GoqlNFssAiBnyW1CuXK88igckIyQ2lMfyJDFTVH325Hybc1DsRofKA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-966d2a7c32e992cbe9ebd8bb07de093fa892b6da_1642991542020_0.09688450021690231"},"_hasShrinkwrap":false},"0.0.0-d20a3dfa8d60976535afe7b8ab79cadd5517a298":{"name":"react-image","version":"0.0.0-d20a3dfa8d60976535afe7b8ab79cadd5517a298","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.12","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"8.3.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.66.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.67.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d20a3dfa8d60976535afe7b8ab79cadd5517a298","_id":"react-image@0.0.0-d20a3dfa8d60976535afe7b8ab79cadd5517a298","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-fPb8I5jm/Nun/AWtYEKWAzeF7DYilEUWd38JlHS9CZ+UpDL10oExA0GLbABFNONc0VP2SwDKWI5oJk6GfbIe9Q==","shasum":"24d00b12080e7fb22a3aac61d2c4f20c0cbd247d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d20a3dfa8d60976535afe7b8ab79cadd5517a298.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8CiPCRA9TVsSAnZWagAAjsAP/RV9knsOrT/dyd0Nzi4K\n4vZYmHlnjZb9eXsKHgKN92aNQOgh90Qj3fbjpvuFkcipv2gdW/KE//4B8mck\nA7BUgVjms5WWevwC1aYvaFiJ+Au29Ywe+bilceq2RkxNew8lhxcF2GqG6nrl\nUuScjcV/mQfKQ6FQ8bRhvqXHgHVwXin3SRM5t7IVjFOBBaOnG2UGzGVetr+5\nBete1iRPi6hjXeO3aakkaib0UJevlPuKtqcCSPUyS8gbn198EpBmbQNd0b8b\nSkqm1tJLrJqyxkbpLbeLiiW2TNLKVBAWYzJT+1gg81M3icQVrUbUYqZ3S4t0\nTnb07YBO/+QZtwaheMVzlP4MjUBb1bVCpkyQLDMKilDJ5HqY/llXahFNQl3s\nu8/VsrQSs+zXU6rDmJSIlN510UYIkV/uGVU4NsVTQ6wTSheFmbSlGmW9KVW/\nuTQuz+2oR0GfP6R23NSRykhRCU7AuYRQqP8FkajlF56abtxaNqVEdHB+rJny\n61Q9ZXhIvBPVJH4AwIdTj7W1h9MrTCGgG8aOrdqjfhdfj9Qb4lcnAw5IrEdE\nVmjHrWWfNV7XlmbtdQJwucDix3WBvw09xuxFtEcSglQa15euEGyFAM29T19i\nXO/84PzcYpFULqN/70I1uk2vLGQ/Vsy5xQdGTQIYrnjEv2dDiNlT00lN87Hg\neUv3\r\n=nYy/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3XSefGGyexZ1aPuLFI8w+4KekwqPKhraBlh+rsPKtwAiEA2wy0CTYNfzeg9oCmg9C7gQzjeHoiNR0rFboeOtfuBAM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d20a3dfa8d60976535afe7b8ab79cadd5517a298_1643128974910_0.37342930983045"},"_hasShrinkwrap":false},"0.0.0-de4e29ccc5a17edf11c9d2f7a3f4b31a8aa308d6":{"name":"react-image","version":"0.0.0-de4e29ccc5a17edf11c9d2f7a3f4b31a8aa308d6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.12","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.66.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.67.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"de4e29ccc5a17edf11c9d2f7a3f4b31a8aa308d6","_id":"react-image@0.0.0-de4e29ccc5a17edf11c9d2f7a3f4b31a8aa308d6","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-gqrBHwXi02DmlroTvIl/KLpAOlkzgyHtxVWqWZEcujvm72H/vLp9o8hcTYRUh8+K1R69fkxnRZCq5THDr+gpaA==","shasum":"1083bd6d59c4d38ab479aba51a3de14e92ac3cac","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-de4e29ccc5a17edf11c9d2f7a3f4b31a8aa308d6.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9hrYCRA9TVsSAnZWagAAWKkP/2O/Jpkbs/oEyYYmT0ST\niZYTgNUud9iZZW1L7wDUgnTKJi/3iLfPUOg5/rwDx5DRSR5NHRf+C4agOtFG\nVRSRIJBm4w7lOPci5Vs0/U54dvmeOfXiNOZGi5l5Blmak7RPbnQVikaehDG/\n2HVh0NrQxSleKWUpE0jvdNZNfvA4CW/bINCa9qOBHEbGzI2cOpJbuNIkEgpt\noGH0Eq154E2sp5UFEJym7wtUtmHMIanUqfslzV+h4hizB2IlPiXSELqdFb3p\nqhzdva4JPX7Mx2gXnJjIOmev1xsDPT3LGasJU6RetCzvDR/mmO+Zuf83VVG4\nv42pCGJmAhaMJJD8UV0Ny4i1otPCGUuBDe+rMw6MxDnObpRoOxCuL0aTxxfD\n2Yktw5tXTDlzfbMlqbS6/1CZI5Oivt0xe6OIFlpkyMUY93AxmUiAE64o+5Gy\nbP/mvfKvao5DtV6PaOMH+vucHW0QB9QFp6QksNKqqg82m4roaFEkvv5gta0r\no/FcOgpfQFyKTGaYBo3tLeRE+EFJrGSJuJ8d4I22l47uQj1M2mR2Igiv9AET\nk9JWFHWXQNMdxV+GbpswahBBxpl/ynbtZ9LI/Vr3O6eacD11eV4flUQvniZS\ngBNo9lrCqLOumx0SH8RxuG4bHlITyVFOrFSguWHnuIoqtjsDrFNur9j8xFFH\nIrD5\r\n=khyZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtDjSNiiG0s8LRmlqDxD/JfB3gqgH0AIoNJSrdBUC+tAiEA3EeI6LRpkGKvUEZswrUwle4B25saUjMYvIBM1l+Mp+E="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-de4e29ccc5a17edf11c9d2f7a3f4b31a8aa308d6_1643518680207_0.10390613227137457"},"_hasShrinkwrap":false},"0.0.0-5c2f5c3a968642bd4dc92a87d58c038239e60af9":{"name":"react-image","version":"0.0.0-5c2f5c3a968642bd4dc92a87d58c038239e60af9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.12","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.66.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.67.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5c2f5c3a968642bd4dc92a87d58c038239e60af9","_id":"react-image@0.0.0-5c2f5c3a968642bd4dc92a87d58c038239e60af9","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Mjm75YyYzZiYlH4lTT3uaI5hG2qzYqO8vZWIofpRU664THUTOTclt6xGlg0OK0Q3j9g7ohw26UIuFVFlBy/zVA==","shasum":"5dc0ea22524b58601d07f6c05ad5f1fb43096132","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5c2f5c3a968642bd4dc92a87d58c038239e60af9.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9hsTCRA9TVsSAnZWagAAlN4P/0TM9ATXrLDG4KbayfoU\nq6iCLE9eGiPvPFthomShEMdR8opoHu1E7sLSWIzNdXJp8VBuSs0ODgpGjWzF\nUWYWZH42yUqA2LWdfamdzeisnnnERbGwFiqHwRlBR44EcjYvfNAuvtgbutkh\nw7I49diOB/s1jNUuPz0kkx784Vli7REWDxT+opXSpeZOhIlUBLZGFTSLcPX1\nqV9iluw7+JHhysBWbOv+qNuzxLqek183ee429dJHARf+Z2HL4rWNseU2P5mz\n+1WTgpOjqlR7uYxgQBhwTSfWrLxetgsFKJSCXVFALMpGMeAKQjuz3SnOfzX5\n1bMXHVZyzr3kEUhHQU5sYtpo+rVny44vrC1sXqNG2OSOybq8ZV9H42hxKdsI\na1ympm3hQDv6ghS2T3Gjef8nFan44tvGaOAdv/UssFPWQ96OzqM/u+qr+i4Z\nTsmQp5LSps+pEsSlYYCcaNeTb1p4v0CVK7na7R4dvzovVXhVYaMHysL54bI7\nCtUvETyWa+Gzmp8cx0C1lay6IrOsA6fpMq06VD5Swn4ne0l/6K2j/k3S2FmU\nmDXLx+ilz/15NCZpwPiGV4mBLpw3Du/dxNy4rWlzb6tm8rkCbmQOCbs8Uk8k\nXgSsiqKInEFzHImgaIrxi3A0v2m9hHUWEM522QIcXkhFJQ7MIDlvyfRHiTr6\nLaxK\r\n=iP2V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGHhIknyS3y/2jLlvQVxh02nsLStschCDOR2Q5tCF6XLAiEAil4FzGQhBWjDxQFPlnQg3oTifs8wlTXTXK2/fji/6xM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5c2f5c3a968642bd4dc92a87d58c038239e60af9_1643518739394_0.5597720569260711"},"_hasShrinkwrap":false},"0.0.0-1c3c40f15be3417d8222e84e7c129776aa709934":{"name":"react-image","version":"0.0.0-1c3c40f15be3417d8222e84e7c129776aa709934","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.12","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.66.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1c3c40f15be3417d8222e84e7c129776aa709934","_id":"react-image@0.0.0-1c3c40f15be3417d8222e84e7c129776aa709934","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-lqNo+PQx0yTmZqokKR1f0Z2fNoOdsLn77N/u8iJMh3xV0smntllD6ceUggykyGhUCs6Pri732TeoRrtW9tqV9g==","shasum":"8eef7e80c78594ed4ed43d7b33ac3830e413fc36","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1c3c40f15be3417d8222e84e7c129776aa709934.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+ZYuCRA9TVsSAnZWagAAYqUP/jUICKimPbUGc4KYbA8X\nuyA33qmujlYYGAmWjQalqfpwfRSI7RN/ZQ+JeGQ6uZ+B6k4WFv3FuYL9GSAA\nUAa6TDi8AFX1pvqDrb/6dCtusAjJvmonXskIWZfKTIK41X3VNklbZM7hUPtM\nA2W4NHavLVRigCKCH1iGd4wvF5Bsp5UkXMBLHIV0XAMH9o82rv4LLiS1Au53\nrziE+hSiVWmPkWTB9550MWhGjIxqVfdiIkniv3M1u+O2eZ078btd5XKumQ/d\nTroJbduuHY6DNyw/aZ7H4r+XV2R/am+09EP5ABTmJJRS2ZlaFBpQQ00SaKT/\nHDp7ulKVyZUm54YGr+BvsgAazdqU/FGqM/i7cV2zctybIiH9t+/3L+KwH7kL\nXwXCOJd5NpiOm7ROfZd3X354AL3ajx2MiS5skAJoorFFl9a4v4NjZ2Fx8dQs\nBeGkHzF1DVer+qDQUF58FmnmOxC1nEnt9SN9/B2+ngCX2i2VeJsvMfrN0OEU\nIStwcRKkx/d8leKx6Y6xcu4McZZFyJlBE+4GeXV4mEgqHHEOVaM4FFybnb+M\nO4mTAqASTuOXwVCXCQUYgz+bywppkzaBS330g1q4Cbo14K3OAbjLJ7sq4BhS\nh6ehfuvafN7aEuj4vwLXvLUPxGasC46LaYqlRRbSAWllXgdaIsLCDHdlN+/i\n4Pvb\r\n=EURA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEe22CYYLtB7GylJEQ4zF+b2xVJeZ+BhmnstYVnsX7fHAiEAxJjwr7dni43d9Nqo5d3WqYdzx9ko3k6apMBety2bvu4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1c3c40f15be3417d8222e84e7c129776aa709934_1643746862124_0.3098212735125798"},"_hasShrinkwrap":false},"0.0.0-0a9a0ab0ecf4f24cdd39069eaf2bfd5649ab5cc2":{"name":"react-image","version":"0.0.0-0a9a0ab0ecf4f24cdd39069eaf2bfd5649ab5cc2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.12","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0a9a0ab0ecf4f24cdd39069eaf2bfd5649ab5cc2","_id":"react-image@0.0.0-0a9a0ab0ecf4f24cdd39069eaf2bfd5649ab5cc2","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tbvqrwYEg4uHrrPXj33uQUIHvhM4QYHrP1shYG7PItkxh1cdC0c/+Px7PgBusrOZAJluMLys8rTa0tWhGl7W7A==","shasum":"183e6b9e25297db7cf56175a4fd7e3a196d57067","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0a9a0ab0ecf4f24cdd39069eaf2bfd5649ab5cc2.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+9B0CRA9TVsSAnZWagAAy44QAJ5VERlrfP5TPaNibggO\nTS7I1+wE0crpnDYOrVi/8o6LGl8jCp6/2y+nIsNUdglyjWON4zCfnH+ma136\nrFZb7leELF9KTG+zAVw3KdIl754ClNwEDtH9HPwFPYumfXZ/bbhDjnejyc75\ndYJhOPn4oO1FXIkd0TuX7ZW36hwRosHxDEk/jZjVKBi2LAj1csrt6er4gCB0\nXDEs2wnne8GsP+PU+ZOogpVVWy1WDmH2XMy8Rrzb5AH+Xg3h525n97ylx6Va\ny5/ABRCnV0IbDl5Lgxjx8tMOZMmhQ/U0mCPXusECa75bYFIjpfVUYwgXp1/A\n6SxLKQXUvu3OzxDg54XDMzIYGyPdwDJBVnOeK4jz20t8vvApbJP1WQr48K3x\nsPSydvyuvBT+2HYfXnrHs+gKedjJxcMJ7MhqFZPtbDm9sriWtcXMBrOAxmf2\nlNo310DqRma8529yMzc8KbDU5XcDjyX18wYc4pSrPGU9X+JL52thHLfaFokV\nxLW+u5pWZwxIdAexmC2L1DaVCdBTjQkvPXWIg86eqLjZ3I77lZvYWulnLCAU\nNCwMR+S1uK/zDJbSqaAsdKpOX1SqnrYIGsdmRVGNTHkZviA1bOGivWhFXAKP\nlZFTTbKMlu9YEACkd5wHKPWxb0GUeLvFIMGCLmF7Z2H+rNQr/x/f1QriMaIG\nQlW9\r\n=9NkV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR1QXYi7HNkthcAG7PwhM9bLhHlenH8xFEkahfBR65ggIhANDeyTStKoQS8fHZHNkMG7eSWtstAh9JeKc/vtTSZq6w"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0a9a0ab0ecf4f24cdd39069eaf2bfd5649ab5cc2_1643892852450_0.10555626824059194"},"_hasShrinkwrap":false},"0.0.0-b7ba57bee1b1ad9a60918bbd2c15a7279ae9dd01":{"name":"react-image","version":"0.0.0-b7ba57bee1b1ad9a60918bbd2c15a7279ae9dd01","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.16.8","@babel/core":"7.16.12","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.16.10","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.16.7","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b7ba57bee1b1ad9a60918bbd2c15a7279ae9dd01","_id":"react-image@0.0.0-b7ba57bee1b1ad9a60918bbd2c15a7279ae9dd01","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-wWjZE6GJ+cmXn81ek+fklysKEheh88gM508golMGJ0hnEtHskvGP1YLdZlyh49ueETfGG0wALVI3L1NqkRRSNQ==","shasum":"edcea0f51d925a0bcdc19eaabbaaf96db70655de","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b7ba57bee1b1ad9a60918bbd2c15a7279ae9dd01.tgz","fileCount":20,"unpackedSize":40445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+9DzCRA9TVsSAnZWagAAZK8P/iYVCoNLJts0UGz2qF8w\nUYQM++XjHvwubaUdC2z/w6j1QqRj8x9xRr7AXEKiX7iXHbysVIgv9tkl+zSg\ndIsaQyyAAM+6DjOesppqpTs8TSUgCbzt4Ba1ZOkiXEcRYXf3Ix+ty/es5lnV\nDdjJPMDiRRSH4kNQIajewi9BEOmyO4OfVkvmgxn7gD5nCFOZz73444l/+qWj\nVyhH3SBGKmNdEUc3vNKwhIElfLzqMAgrNBP4F7dB8dTRzOEY4cKgBkilm2iw\np/BkRXuwZakSpiwFUP3am4uP+cI6AzkOKgYCB2YsrQLU5VNsVuaD/Ci2Vzyw\nrUhyUQuYkJYT2J+bG377+CM5C+hS+1ZXMPgoSGMxpVb2MwzpHPr9QXmdsuOE\nvMLi+SnKXA59Lw+U0wbgqUckvDqEg+zieH6rgie0kOfQpQaTp8Yd1Sd5DBNd\ndAH4o5sT03ggVpadU9ZjvokVVKIlv3QW1HdKWrOXiLqa0WtQTCYkM4kPv+hU\nRH0visZuY8eoHhl25Tv3Qo+RUPJepX6ryD8zOtehuwoLRQxmJXaMwJPb4fiH\n0978kyVk2M2w820dBKkRc1SrL7SBEFC2U32VsXowdcmYBOdDGkZc6tQeiMbA\nfwIsEmK2+4E6DbBVHgbHge+g2xFMGetaZ7TvX8rbWGz2ittcjtLZuj51fgAl\n/9lr\r\n=aeXb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1xwKFAB1e2M2KwK+mPYMm+Z7weUFX9LcK5zrs6jdklAiAEBAVJEaSK2ybnped33ZdgDByHJAdYmUu45kE4Wxuzsg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b7ba57bee1b1ad9a60918bbd2c15a7279ae9dd01_1643892979075_0.9866090437409798"},"_hasShrinkwrap":false},"0.0.0-6c4e86a939185a68eca58ab942032e78d2f095fb":{"name":"react-image","version":"0.0.0-6c4e86a939185a68eca58ab942032e78d2f095fb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.0","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.0","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.38","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6c4e86a939185a68eca58ab942032e78d2f095fb","_id":"react-image@0.0.0-6c4e86a939185a68eca58ab942032e78d2f095fb","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-KadkB3TlVNS7XdDC5UftmWd6QjLzfyFFQRPfE+oEKk6mM7q7HMk83oP6esNeGZbyawlMOT2EcvYCsfxUb/YFKQ==","shasum":"30e1ffecdaa7f897232ee21f3acb3ad778bb493e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6c4e86a939185a68eca58ab942032e78d2f095fb.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/UEJCRA9TVsSAnZWagAAsxwP/AtWp2sK/NgiGcjXZaf1\npMKYalc7itci7Y+2HQxwIp5FnwZ9U7hTZUcJt+sUbiPDiWiRjhNl8vJN0ebZ\ntgCYgRg938p9+Dd5vi7FblT7hbDX+Xkkp9J31MIMiqgW44bh2oOaRXmPOgmE\ndvFBZs9PRo6+mFIUXxbdk3wljNcrVsjCmqTNo0DbMmWCdtqwhLAALFDv2uIP\nsMayA1Gi64GW78Kka8ZCu8fDHIW/4AsK/9yoKC4aLxIysKcbqnboGdTVKR9O\nW13CW0UVM0cQA/PdB/kQpI4f2Z8IrW9DIB/oBetQ/O61vKUi/4QcPnTg4MQz\nTEVRX+8g3Fge9h9XSnNCB53SZVXrU9z2f/QGE2oOHZiru098ISx2akuw849x\nnWvVALk+jRd7Ux+if3O+EW2SQ86qXgQHSPzfFdnQxFCSx3ekKb91NMVlvemV\nHK+s7GgzyEHYPDnU30QDOvBMI/h/JmKG13KGoKvFth47/pIbmAyI0vu2rHJE\nERjbAhau0Ql90fQlWmhZ2Oj6QNo9XNBPjO6PaQMIr4YgT+3xjfgyELKjd7ht\npHV909E8AOmFfxJYP4EIVeYZNNe6Oyz9t/i1YlJtM77ruIVzprtdACfbR5Bv\ndfsZiT1uBcCMvnVS6DwDrcmDp3Pbd9rfFvvfek8+WPvTzS/pMdimF3cBzqP4\nNXJH\r\n=4EGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA96TPi93sjY1MXXEz8RuPU2SdhnXTScljb0ITi0z/GdAiBpW7kJs2wRDNpmRFqL9mrisIFq+NmvgDPXRR7aLNKS0A=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6c4e86a939185a68eca58ab942032e78d2f095fb_1643987208872_0.8347994775485925"},"_hasShrinkwrap":false},"0.0.0-b9970523f94ebe936fc3d6e172242a0f7642632c":{"name":"react-image","version":"0.0.0-b9970523f94ebe936fc3d6e172242a0f7642632c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.0","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.0","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.4.6","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.4.7","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b9970523f94ebe936fc3d6e172242a0f7642632c","_id":"react-image@0.0.0-b9970523f94ebe936fc3d6e172242a0f7642632c","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-BeDK+cl+nYYr4WMYNAJF37nPHJaATsSdoJeCy1cWv/Mwb/tCIEzt8ObS9lJbUtalgi5I4dTDExzO+WHdHsVHiw==","shasum":"fefc02dc6d89bef4f59ef235850eb394e4865675","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b9970523f94ebe936fc3d6e172242a0f7642632c.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/sAxCRA9TVsSAnZWagAAKH0QAJixQMBgJRWi8P1Fcf6K\nNgw/pKvNX5Cc6ATUWjIF9URoG9Sfv/Y5iDh4kMjEPcR1KPivr1RAqDCfqKQB\nsDa6NSg/YqgX7gWrstYDf6a+HkgjbC12+4xMEslpFBRGj+jnemmtRtJDj3bL\n3TSi7CApXVFWvgpMA4uUFERleWZnrIJxjNMEUUAqPQp8z5B8n+mrAWm0HLpG\nOrvWCmMLZCBHjt7s5JUJdTKd8GxXIFCCGzj2Kw4jdebuai+9NmX1KcGRLyFM\nN38XH2NdxAS8VUNpGg/w7UE/r0l9AaHOY4uywif7asrk++BPMR3+n6hsfnRx\nxj7bukGEXamDIviYXKcteSE312wWXd7Yx9MG57hVO48Mnq8vjDM5JBqxIIzo\nTdtilIP58e7VdetzbZyh/CVYcR3aj1ijNjHh5LItzFkel3NOZz0DzVffh//b\nPs6y1wGRRBTg330K07ntVSR9AOlOHrDvVTmpHJZcpAbY39HNktM01sUj/1mn\nDnvF5fWVzoJjTobIBJPUglpRfDT+e9NvyPLJjR8ViRHmu8tXuAbNqkAXpAHq\nbP73HgMMJHIdZs8cNESHoWFbGbR447QhvHcQNM2PJ5b9qmbpKyJbPL1xn3El\n0bwzwvCNmIlJnwdQ0K4vJ3AUXZ9m7cQOy77Wat4MPyifquhvC5JDS1XQHkhQ\notuL\r\n=drXQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMB42ZiUmccaeoZ0kZDqlkxWMLlL/mEzZ98uDp1fAzeAiB1HIH9wuxMvXbcJd+ZM6jOfBEPNc5NIXmH9VSWxGfMkg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b9970523f94ebe936fc3d6e172242a0f7642632c_1644085297380_0.15181225685830602"},"_hasShrinkwrap":false},"0.0.0-3ab2809ddfcbdea904c3b4edb4215e1ad6bd4375":{"name":"react-image","version":"0.0.0-3ab2809ddfcbdea904c3b4edb4215e1ad6bd4375","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.0","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.0","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.0","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.0","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3ab2809ddfcbdea904c3b4edb4215e1ad6bd4375","_id":"react-image@0.0.0-3ab2809ddfcbdea904c3b4edb4215e1ad6bd4375","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-erxsQigPfppomF7dTvQsf2tLgvR6/g96rQP0l7A9/HRl0bxYBs0qv0aS1H6aW4gsz6JKwjA+dkPl4JJuV9AmuA==","shasum":"675603d75be963549289311a82200c0eab141d9f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3ab2809ddfcbdea904c3b4edb4215e1ad6bd4375.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAEIRCRA9TVsSAnZWagAAjM8P/AgxR7DqcMjNv+kvhSQA\nKRRqPRDBTB1gESTKx3QAmxP2DKC2uU0l+zzEHIA9fYuNLP/ek/g2punVWpzT\nObSghXvVCvb55ywNCApDiqqfzexdhlG1BPXdggAi/kCrmrYFgoU0kUSzZPfC\nfPN1dgrig+saz0O4Pm890pT3JWZ0FGhfW9KNMOFjIkWhY1jfo6uq++fWRb1d\nsScN5pQmTEp4oWHS28LhGb4dNtaGtOy5W6I3uMsVuYuRjQ4Jq0X9od8YAqHG\n2f79w2IBXZDiLvfY2t8k8nOLkF5ddwxGKuMG8+aHm0m6FYGqQvbU9fs82RTI\n7OO7kabz2cnD35JmfT3fQ3CEhFTJraWOs0w/2yJdmSYR02qHp6zooBdPDm74\njdjX7c/k7eXaQA11Hye/01VgrmIL4TTqN/bhDjVgzQ0mfkn0MDqSnEiwzDUW\nSDoRSNYWdaFHA/dxuqTdZBaTcnrLpoNAFsbyRYD+E/ydYHyqLL1iOABxYz6h\nF8/CqeE/nmUyrF7xuqqeo+JCbAB9IZJADtB8HRkwKilFyg38fNTGA0AxYaGX\npn7SszV8oCQZjE5oMHEQt+ul4NQ6PgwMdlQd4iLMIRYx2UQ/vCbHp/y/eTRI\neH3Kzwtk6llX0LBI5eJjp1PSfUNDxKRNiM1DnBX1xUPTdb6wixNQ/q8ouNv6\ncXqE\r\n=eG5C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4W75KpXPOA2BBISejvYjD2gxt62SdpMvQVW5sfyyDuAiEA669MefFvokRB5BwaqLgUlt7URFWKQb3bQtjUPjyBlGQ="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3ab2809ddfcbdea904c3b4edb4215e1ad6bd4375_1644184080967_0.15684034294671334"},"_hasShrinkwrap":false},"0.0.0-1175e546669717e09c71cfdfeaa899770b42601a":{"name":"react-image","version":"0.0.0-1175e546669717e09c71cfdfeaa899770b42601a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.0","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.0","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.0","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.0","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1175e546669717e09c71cfdfeaa899770b42601a","_id":"react-image@0.0.0-1175e546669717e09c71cfdfeaa899770b42601a","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-gFatisE//NH5NK0fkiTbrePRrbgKVZcIfq98N8DRujbSJDzxrX55lvxl1WNB92vHe6QBXkFMZ/cmV8iYnOwv8w==","shasum":"41cbaaea2643cb600a8f73bba5971252f10b3ada","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1175e546669717e09c71cfdfeaa899770b42601a.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAkZXCRA9TVsSAnZWagAAVWEP/RMLLcybuXB3SBM50qio\nRxwJqAgL+d7tDjwEcGM5goWTHJeLgbQbFprC9kDY4Gvy5TjjgN/OhQC1U7Qd\nhZWF5SPHYgWuD0tPPdYCNbweXuX4vDdwuR7XrP+L9LOW3tskVFRavvCGyBGZ\nuj6LkrEqsKBMngNnhoMoubl2G6r2IDGkuzwB1PWvbhi76EGLugAFMToRTF4h\n90HSPSJ81/JEOjCkB920cfiivGuHSQgEayyYXhWxts3GRZ42kigOvGnbOL9j\nOaX9kjChMSit7fGwpS0AgkESGf/m1FlUJZJBBWVozC8bmr5K94dqQ3vMyt5b\nfTCy296EejwvS9i8vgbQQ7I/8dFdTebMU7yAOpv2K9cc5wV/qlZQ/TShItKd\nSOG6QMSMayS7DhvSsoAPu92SgNYJ0OHiKl4dMtdGlaVJIjskMX0JnF/vfQpE\nA93s+7AdWtPxgtITZC3jvQWHsOXbd0XbTp3Iq3gDIEJ7a71plpVfegooXt34\nwmaBcgSP59lekkfcAADIkopaMXs79R74mJ/8AnJjKHU+1+dLFm5gDcS3MBt0\nBPmv6yGULdbAI+6h5rxTRp6Mg18FXZeT5UZcvLx8ky3FKXxlLZ5cq+x1Asa1\n7Bivfy729iDxOzmi+m5Hj+PoIfNHbirHn2/cllAvBKhw/yv3LZuHQE76cOW3\n0WT8\r\n=A6UX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhoBp4FC20fy+vu8kseQ7lP7trFjBRZfcYRsGS2d054wIhANHMsvGjYJ9yS5w73XcsVQWsnEbn6EHhdID/c94FQDyL"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1175e546669717e09c71cfdfeaa899770b42601a_1644316247455_0.5698059911498299"},"_hasShrinkwrap":false},"0.0.0-b7f868e2e3e0f0af8ab820d895ec37329f6f8992":{"name":"react-image","version":"0.0.0-b7f868e2e3e0f0af8ab820d895ec37329f6f8992","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.0","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.0","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b7f868e2e3e0f0af8ab820d895ec37329f6f8992","_id":"react-image@0.0.0-b7f868e2e3e0f0af8ab820d895ec37329f6f8992","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-M3I225YXK8rAATK54vRueYOcXl6QNp8jx+6u4+06tzgvNRDzcYbdX0SlCSi5kfERWGh7rn5a+x/c1KZ6lcSsDQ==","shasum":"d74e01d0e951a5405a877c623b002ff59bf5f0a9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b7f868e2e3e0f0af8ab820d895ec37329f6f8992.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA+iQCRA9TVsSAnZWagAAZjwP/0C2eqYyulS+SDluVqUx\nlPty15pK32u6NUs6em8KxPbro1vn+9T0aCLVRZmRO2I8I38OGAZKsSZ9OYOF\nDWzaQP3HGvNewNKAoJEWiQpEGZVOQwIsh1OUO1ZI1N/BXsMY8Jzp4sBBdYWm\nqf8VIW/sInjTBXnJDUY6x/RUzpCce+hzmS3PimThyc/OBr5BekhTI0t+4EWj\nQDQUbKEDRv9auxGG49gly0UfuIoyIWBuz5yppvQp8uNGOcCprh70eSIy7Awd\nHVBJA0oz/NoSUyc+nByv0Byj7T5IVrI6VIUnYviezGwF9uVBM1iFLxSELFjk\nI4cDu8q9EtVZp/q+zkW+X+jzGY2R42Ld/G0N4GQzkZEA3usa0tRuPbjMJhGM\nvMDW0TG/pwegUBUMJTNm3kKqsHdlD6iQo3g5dkSJBf1MoHnQqpgfZIjLbcXj\ns2WqCbGW05ai6Tq8X1PJ7zNLSk/2Wu5dsQukGbJSOYqyznnbf8MMHECooekg\nX4nR88srD9h6hs3juMjEbaJlfTJKWsP34SYZeyu+/C8lLTIu+/z25Thoco5M\nH6TxHi+7VE+NhJldKNA8P2WPRvPzU0+nyy/fbf4PyKHJhh/M9kSBlp/J2ErR\nbSbTVibjw7nuklAuEOIDksnwRmypOIMkkza6n/C2WhGZDvRIh3RhbkwJvQh+\nF8H+\r\n=M8LU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6S2ZbdwMNIuP5MF2N6DTDsWvSnlohEQ4VBRvKzoifaQIgKH7PLBRQ/HYNw4NqO4r//q3dBDOWv9wYeatojN4YH6Q="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b7f868e2e3e0f0af8ab820d895ec37329f6f8992_1644423312050_0.9037095452885915"},"_hasShrinkwrap":false},"0.0.0-1fa5b9af486717dcdea438674e729ef8bae176d2":{"name":"react-image","version":"0.0.0-1fa5b9af486717dcdea438674e729ef8bae176d2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.0","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.0","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1fa5b9af486717dcdea438674e729ef8bae176d2","_id":"react-image@0.0.0-1fa5b9af486717dcdea438674e729ef8bae176d2","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-DDAdrBPUIX7kkQAJFR595wkp1TU5AFqEEfe59uvbAjMDLPGfVjg0u5j/Qvf41MuS7CSImk8RCbW22GrKvRBNXw==","shasum":"7d0eaf8bd412aeddcded69b4386dbd9f7d2b9938","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1fa5b9af486717dcdea438674e729ef8bae176d2.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBViJCRA9TVsSAnZWagAAqbwP/ic+FauW+EJWbZbyKUnL\nJDOEb0I7idpIo7cW/zfARf2HQVxhmelqhRhs8g0yTckDCFF/xIgoe3QwchGp\nyzjMQ8/x50ayOuIB1dMsSsyxe5nh78nmjCqzJINB1K41eIfMGu0P87IwDiJ9\n8KoXB2JBUP1Ck9DHxyiupiEE8cgz2ILlBbl+luNrv5wAcvw/ncBSnypEFlvP\nxIZB87dwtbnKdBScz+eeRuV1n+kWeQYgodCnLLr+RaoF44VKjBnqNRNEpQKZ\n88qz37K00yz/NE7LmUq3L7fTlN0ikFHT052+cNPJBTKitpOlZubxuR6knNxd\nEjxtNppcKZGrlY/FjkI0CQECyB4a9KS9Db1qdL1fbpyTi4m8o7ZKJ6CxykFK\nwsijAX6V0JEydGMpCjjXXgtJ/FZS/MJ+T8syOZbhK+a/TzZdZZ5EHKwHsAyy\n44dDwFhhzXbmoUDV5w6C6MOnbVpQwHunxIbbUGhwhFDnUk8ni4UDJmCZpV1n\nUO52PxDwZVZhfyhH1UcDT6WUaI7GS1q8nQ7EE118eKki7gfxuKjI3GTU1bWa\nr1CTGIiwGp68CljBSRKiDKVYf1UqUVkoRAjOL/k7l7bdTnqKeV4c4w/XKYw+\ndJxLLiriIIEmphzoiRyFKOe2JYcTtWa5hNK6OnFXFylYEqmileYrBsIP7otj\nrTJQ\r\n=BrHR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNfcpWojSCoCFHMhQkqrSv/1S41ypNL88ByRyCANgg4AiEAz8DsghM7fFLUJGiTtox7jPjpB8pq+35AazDCgjqnc1M="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1fa5b9af486717dcdea438674e729ef8bae176d2_1644517513148_0.45790726038901397"},"_hasShrinkwrap":false},"0.0.0-c729675bced0c25b040e282ffa4137be973e4924":{"name":"react-image","version":"0.0.0-c729675bced0c25b040e282ffa4137be973e4924","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.2","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c729675bced0c25b040e282ffa4137be973e4924","_id":"react-image@0.0.0-c729675bced0c25b040e282ffa4137be973e4924","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-Fe/SOds4uj7PIRn75eHpjCtBvZzqby1YZkWCJpzo+pjANPDdOXnZNLfhEk5EAdCRY6oXBBlvO8sh3S1/Ctbcmg==","shasum":"086abb58ef85f9c3e5587b7385b977be05f8f97e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c729675bced0c25b040e282ffa4137be973e4924.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVkkCRA9TVsSAnZWagAAAs0P/1AAJ9K9VL+SAJhbx6Zz\nHHQY1D8uOBvLfR2dVKprg/+SiicsubOy0ynhUK3R3e0Yg3g17THd01U2/pBh\nXM5RMRcmbKjOTyfmOK4SoyCnLnEYOyGHDdTtTs0gBTokoFXUjxbZZW+hBU5k\nk8JD+uSkZ2aiAg9Er6uUeGG/xFi81melvfiXpCffxImpEyAIyECJ5dmxTmBc\nAAPPIlOIigB1ST2GYf1Nfl1w5FyVkW1nU94AtHD2teY7uYFnhShPl+Xhttnq\nPSqkfRAVH6mQf8/j13BNtsnictdVogllnQwzCeCN/P1Q+0f3kTkqyNddwh34\nvlLggc19Xc+ER9N6KfhTFv0wvNTQBC9hHQPxABO7vu3Gzy91e9KVHt//lW/T\nwdnm/C3s7KnhuVQepInUSwbFxV7lP+HhOtN+QcHsoFWGD4JbQlTOJtiZC3M5\n1arxNwspUC9WtPIh5d8oxRJJ9u/oWH9Qm6ep4sAgns9pYxqXNGYq2I5CnBKA\ng5bj8CTCCWXqsDU78wDSNKDpBjPRwf/VjtLFQD2W9/m7gL4X10Hqnc74lLij\nLBzcOf02LVmxvdV+Xkm/ybuX48QjIYigZRZTaUStvSqR0ek65pAwKOqnlcIh\nVm41Mhh3XQpQEp6Fkb88nwHZYCXA54fgX/y2sZdNfDBAbhsPsYSK66JJmBcy\n7H5R\r\n=gjU7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGMmC8ccyxFcGhgLkc0Bg0wdcHubNaJbU1SogM0mYqZIAiAZ7iphVY534KG5x7tB4Nadd44+/uKYlmF/kRlJef/M/g=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c729675bced0c25b040e282ffa4137be973e4924_1644517667974_0.815845413676058"},"_hasShrinkwrap":false},"0.0.0-23f7ace574e26b5e4e7794b353c6396c1188de01":{"name":"react-image","version":"0.0.0-23f7ace574e26b5e4e7794b353c6396c1188de01","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.2","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"23f7ace574e26b5e4e7794b353c6396c1188de01","_id":"react-image@0.0.0-23f7ace574e26b5e4e7794b353c6396c1188de01","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-hi5Yw1ls7YGqavugHnXyRsZRPu4oAWsxuCz1TK3dTYVY2uv/1UltdMbIsYZshkP6UagMyu1i74Upc9wCcui8+Q==","shasum":"4bc295cab4da12a168fe7632007d74128628981d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-23f7ace574e26b5e4e7794b353c6396c1188de01.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBuC3CRA9TVsSAnZWagAAFCoQAIdEnOwTylGdG9uGWj93\nCRre0twK0yz2nfXwnBzFmSDeLW7w9Q3nY+8PZctoHufR2NBMX+rol/b0LHMq\n6xSUN29RF/IHd3auT8EFnoIHdH1Ruc/Gylgx5o6osjn+KOeWvAlJ0nTDFkpL\nhP+gNJvSSMbHMiRxZJGv9ROBzRtmm6Ot0JR+/MAC+tykbPC+e1jYEspwnyyX\ngOVjrBQ/wgRBpfvn1tjA+cBjKTVcQmnRik+AFL1vW2DxXrOwKj1h4LsZ+Epd\nYXuH+wtFNqNJoS+XOzk1o08anoFaz5DOq4ZcAtAF756CnXm15XuJbPkRtu/S\nAdlT29o7cw4Qy2IodveXaohCBd5QujsEw9hqV0m9KQlD92nb0glQw0PXpsAe\nFOhzG1JqWgCEYo9hcHX1yKPoVb8HsgGqVmAIbEYYM9TOhyLmp4Fk1NbBbd5D\nXqLMtxml3/kXwydAhZ9Ib6cmXO7RjBxvwI35b+sReTMuAhpUyG/whJOGZMh0\nMs7FRI1rno0ErLmCxfom4ZnL4VRZGlMMAzHJNxWGOlayM7xGvz0xhhmG+dvg\nGzW3FkSpqlBkLDdhKmsUtofpbeFVlRD8hTpnCkIiv/Guv05q6BNIY+LPF7cd\na2kFNH7SoL7RsJGNIkUQTwWRgviWcyAhok7yDTL/gktRSoJW7LfUNL0kOTqI\naDBa\r\n=PfR2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCK6MCeGW0LAxKVV1erzpI+oqC5KOK9p3n983gKSFbziwIgUYtqVKL6j26YmlWwRSFhEFGPPtwHYHDC9rasVFhtTB0="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-23f7ace574e26b5e4e7794b353c6396c1188de01_1644617911668_0.724504134199355"},"_hasShrinkwrap":false},"0.0.0-8ff1be789833553e6bf02a5b35a4701c8ab380fb":{"name":"react-image","version":"0.0.0-8ff1be789833553e6bf02a5b35a4701c8ab380fb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.2","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8ff1be789833553e6bf02a5b35a4701c8ab380fb","_id":"react-image@0.0.0-8ff1be789833553e6bf02a5b35a4701c8ab380fb","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-NA1Hx+RYr5LgYdAYRox+LenXL9zwDdunif9/mf6KI5J7hqjk7cxPAu5pAxtLdRyfHCW9Qn9QzTjeZ2Yi67kxFw==","shasum":"f0736643c120d5084246fc1eedc1f7f473800867","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8ff1be789833553e6bf02a5b35a4701c8ab380fb.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBuFPCRA9TVsSAnZWagAAAcMP/Rk/V6kn6pFSDKGiZAlQ\nmUqXt9G5QqDhyWQBaZiErIlk/CfQkLk6f3gQiaFfMEcZ34nHjfavZCgNLVnm\nEZSKaqYzNNClyPanmXYLZjF0nMQC3mg5WHTap4iZDtusSZ1BcEljXCdI9H/J\nttzyP017399w5JE7G0BKij3BnPzQCTDpB1M8dNnw9yWIdZ875GgdhBQz/btz\n1eHQceR5UHmWqPl6jUqcmLQTIbmGDVutudwPwaMzcMC4dQTlVFjZZDTHd/vV\nsBoB9JKzreCgZ/CL8PUXqRDGtBZIUPZ2sA/UjteGOIvZnEg98o+FSXVp2HgA\n7usUj5IEBvb9gpJHNCQDEvU56hI1/CBLIJRyCAMMp9zIq+pnnlfjiBQrqQqV\nRySM91GmyjG16O2d56osUiOL8blzZ+nTrN2lv0ujjeC4y3tXfTJh7hQDn4zl\nX0SEN3IiGuXUg3mc7kSCPMPhXP0EXnMbW273KPvxa3FRiZjkUhklI5gR1olk\n/OedmISPjP2NvqAiJiQ//1404qW772UAs/5rj1gLIH5mSLlnPtZxG+7EDHTY\ncuJSiGaEWjHjrKRppw+2JBQDa9vt3OpVFrVe8FXNpmaohNGCfkcUZz5ZILhG\nlj0299oxD9SyLjDu3UyREO/W1LCJhSus/opGI+YOfeFW08Ba2YbUIkzU6fdF\n9w00\r\n=G9j7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7fKoFQ7YmUDDJT4ujtprJsB99Mj2A2Z6bcy6+a7MgnAiBNemWb8w3lzLdvcOwZJKogZaUtUD5bHgmKkfyoznZrgg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8ff1be789833553e6bf02a5b35a4701c8ab380fb_1644618063435_0.8419299364719359"},"_hasShrinkwrap":false},"0.0.0-fb71bdc4e90a26c85a31d900578a5f9616beb194":{"name":"react-image","version":"0.0.0-fb71bdc4e90a26c85a31d900578a5f9616beb194","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.2","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.68.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"fb71bdc4e90a26c85a31d900578a5f9616beb194","_id":"react-image@0.0.0-fb71bdc4e90a26c85a31d900578a5f9616beb194","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-rTM/1Iqok+TRaws76Y5MZFT87xJjbcReSPet12Gy3+GgCdK8+Yag4YKpeRzDSkE2W0oC98mSkJe0VSHATRS8Jg==","shasum":"ccc2298b591079be68f255a2b8eac3377ab929b1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-fb71bdc4e90a26c85a31d900578a5f9616beb194.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCHl+CRA9TVsSAnZWagAAWakP/i86qqiCHLUsB36T8PCu\nwQ5s2OCQGG+xEwFfohfrmj7B8xm02p/L2H8GntYoRXn4HkQrW6cri7Rbm2lO\nOJH3PLI/93xeNnukiD1oVuVk9ipW4vUjyiwfX3dfvwoEvB2VubacwPyghCrZ\nUl0Mm+R+dG8rYx2jN2LHHae0qcbq6ZhHEYMP5yFh2U8Wir0AlsvTMENBwMSH\nVMcYbSxdAnn7c2UwRfSM8OE/ZFCHQr1cduMy4KwnGiMTw5Gr0llhRK5EaYvF\n+xqcoD7LxVvl2/lKmL2DBibf75iA/io8JSeerQC8xJ+9FZIUps8FInl7JQtB\nEXR5AxUn1TBMKnqL7ZrWBEa3owiTMAwUq9B3nQEQOMQo6jIjmt6tFFWdro+6\nBTYUs17/W7Y3m3tbpcTJO/UyZrYMA3nEn1pXTQNe9WdXnKrgJK+jYf80wD19\nzEWgOt2Ob3lg4GUp29Jpgqsbdm87FkpkbJViIoPgGkNjsI5Lt2Fn2cjhLcOz\nqFYx2RRkNyWCIYUvRwCTfWLqfeIDR7J2cFOBqJ9tHYeT9VWqqTfrr5/vHkxg\nBv/g3GzZANfzmV6v8nIjfbkZUJaza/yX+IZoV7YiyyoPnRgim4H/KG5xu0DB\npC8T5XwxhW4TERVXg201lTEXOIc6LvDb1jkK/HTFCa1nUeRdurm6oQ33AtXl\n3ksD\r\n=BfKl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC68E3Mku3cSH9egUAcaEE8gw0IcAHEwo1/MS6i5MGxgAIgbf3ntwg56gjb+g0aHeUyoFzPYYK7xzKewLbF/rji0hs="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-fb71bdc4e90a26c85a31d900578a5f9616beb194_1644722558092_0.17694288601118213"},"_hasShrinkwrap":false},"0.0.0-cacd9458b48a2da043cdb9138422a1c16752f840":{"name":"react-image","version":"0.0.0-cacd9458b48a2da043cdb9138422a1c16752f840","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.2","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.2","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cacd9458b48a2da043cdb9138422a1c16752f840","_id":"react-image@0.0.0-cacd9458b48a2da043cdb9138422a1c16752f840","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-7XtnDqLi0n33jfYueszR+STyk1DwnA2NUy9r78VQesWRSZcl18QC/c4Lk7UshzO8Jer4U3J2sHXysn6ezpLhnA==","shasum":"2197886c3458050d7ecdc666be04726b2e0b61b3","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cacd9458b48a2da043cdb9138422a1c16752f840.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDSTuCRA9TVsSAnZWagAAab8P/23Kxzm5WJ/K827JMOJ1\nv5fDRYKRpRkOsd3qyND8XrMPhSQ0xZ5bFkg6PSbYmNT2hJob2myVgfbw0dn/\n+wjCZUWDL5rPRwG/2qMpC4b5bBfolAi7QPbQ0gpp+iFm6bwCk83KUEiZIAPh\ntBT8vaEqCvjXuA3FDGcDtLRWZDimiNS899YUCPhfKxEM1+0t+VqoYP3vyg6V\nZWJLObtedrm4P9CficEhq06lxtO5bELtAZedV9LHIEzgbcv+QXdx18E8E/dE\nEU0nnXrtATFja14sfqejqcrrOz6AK7iKqihFVKWwNfRzhXBlg00JPysS8dRh\nW4YwJQCCFgwY20SaLugq8fbf6o5iqADzYqlEsbNULoNUGjWzviurSCDVQA0X\nCTZ8p4WzpR1OmCjAuAFeiwOh4zuKYUgkaVEYJA7AS0KWAbx7lJX7PODDoMaB\nyRQMC5dEPWRLHbVSDXEni8DtFDKZHykoL/rsvlj2+4gKkzUKYPPXf0D5os27\n/wrca5L8WpuF+x7D/aXqNsHFQHtLB6ZSzZUW+cDbjZ6tTM94XO1j+Gp8aY7T\nJX6Bkdigg2/3gv7t8FiRdcwvC/dPJ/PFK+8NWg6jHXlbgjPx0oNY/gWK0wnY\nZQk7ubBbaPoMslM+Vp75ArxTS5FB+Kausxg76oE0T33M0XiZLGlCWWTvoD/u\nsT6J\r\n=hZfU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqOSziO/CesEvO4u63xE1kMNsWgq5sJAAsdiWJDuIogAiEAm9QsM4vP29lGWngfgCZ2K8odbSPpzqh9CtNEXA78Av4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cacd9458b48a2da043cdb9138422a1c16752f840_1645028589952_0.4910447065607295"},"_hasShrinkwrap":false},"0.0.0-21668258d6c871fe5019d968e4b04e166c2023f8":{"name":"react-image","version":"0.0.0-21668258d6c871fe5019d968e4b04e166c2023f8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.0","@babel/core":"7.17.2","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"21668258d6c871fe5019d968e4b04e166c2023f8","_id":"react-image@0.0.0-21668258d6c871fe5019d968e4b04e166c2023f8","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-+b/05tPWwWD1CrMDNoMoXc3apldHXo29ND7EA9bfhsaSYykj/+5l44Bbfnu+Ma86Ksv7gYrECvJmv8a3iVUuYg==","shasum":"71ba9af589e1f6c6b385cb6476b7385147bdd591","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-21668258d6c871fe5019d968e4b04e166c2023f8.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDqGhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvyxAAnu9JJbbQ1ysVTF3EAaqoGD29iuiV/7uSluj6koyXaDwK7XfW\r\nhrRXr4d5i6FFIiTWq5Ix9kFgBz72yPy4L6QJ0y4imGSge7SxHJs88WiEkGmF\r\n1A7Vxc2nr5YoYb5iIFz7uwjJqXLiV4oxicuUf7XY620GsxSCZnXXLg0mziBr\r\neGtAtJuO12iftVCc2rrm6ZitBBOmrFY9do0WROSzVibVCS96+nYcWMDrYJHy\r\njVhx9Md/EaLY2y+IR7ysaqKrqsCqj2Ch2OHjWin0W07s6+br7UaBGovlGfuZ\r\nA5kZY5+T7hRoVCQA3ONkW/nh7V0ciQQ4tQziHcAeUA19agIuQQbfFspdAx5X\r\nvSduypg6mpEe83/AHS8ZlxRqozcecWbQ22PZoL0CNMKKybYV71xtSUQrcF//\r\nsCtNoQQRCBTXJgeI4Y1Oid2g90o7+fK4iS5koWJkZLNZTo0pCAnuGtPMr2Ki\r\nMaVpwiWeNzQ8BFVeFHlG0lKEUx3BvUO3eFJ2nyj/Oj97F74ocUOmibx2yh4v\r\n2p+HVm8rKiDR54srIQ8CrHz9lMi5l5Zp0M0thlCER8MqYyEyO5YGdxcZDRRH\r\nR8UBGOtE5KfdKsqrkJmpcs3p0adp6lTH/Y32YDq9qpfPCkj1stjg/emvyxoI\r\neIoHVDrvolLzqghOjtzGLyjY0/P7YvaqWhw=\r\n=6O+F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3WbuquYr7x6vzuqWV0im4O9Xf++Gxz19cDGxuvr8zUwIhAIKD5sPcRuKbw2x12qBPGRmxAz+ggvczb1Bacu2ubEnu"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-21668258d6c871fe5019d968e4b04e166c2023f8_1645126049571_0.0035205291435751462"},"_hasShrinkwrap":false},"0.0.0-b0ce39c722f3c58ae03ceff0e519ba5cb1a32aae":{"name":"react-image","version":"0.0.0-b0ce39c722f3c58ae03ceff0e519ba5cb1a32aae","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.3","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.2","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b0ce39c722f3c58ae03ceff0e519ba5cb1a32aae","_id":"react-image@0.0.0-b0ce39c722f3c58ae03ceff0e519ba5cb1a32aae","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-uaCy2rAHFQUm80X8kApoJ5eEt3Yw1GsjCWHzqy9l4uCIO4VU/ZS8khY0WOyT2QX/NiNEeWRIjwVGw22hOIUtvA==","shasum":"0da4b5e4ee8a8acd211927abcb57dafe6acbb320","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b0ce39c722f3c58ae03ceff0e519ba5cb1a32aae.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiECsyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNphAAhNkECnpUHRIMnObOqIZl/rBxsB21Y5Q0Wlefn3SRuTuci5jR\r\nhUPCeTtnEUTO5YUhLw9kCWZLYD488DpryZKjd1/+yyPef8p8suGoiyR4tVmf\r\nL0RrfEyLZsQzjbfEEqv7A36nDcnOtQzHtEY7I0pHx6ic4kBebcxA6zx19dNl\r\nD1jTvfP7pWHZVVDXrJRWfdxIbgbeIDI9w6PvIpnwrjsORL5NY+uSDEFiIAEm\r\nTVXy7Dd5n2JR7SngSZZS3Hr5i56oJSbSl0rl3TavabcyISLGFcPkRGv0Q/LE\r\n7QhugICwlSWCctndvbpkhB1r45aazIZdxPTLHndNsDvfSQ5x3UtfFEXXbYKR\r\nwZ7f5XJh9ib+KR5fK9ZQQnjrJKZM9bOleJ1hgL7lUzGDK3O8MWEkvuE9rn25\r\nonF4+qaZnB5wNalN4sEn7kNs435uMiZocqngKqlUpKgzXk4yYKi0nl95hhb9\r\nHrKVb9G5WcYRagRZTn3DyprhsHPZ6tuFBX+wqDyhrY7LtuRG2w2MsbaTBLX/\r\nQaoZ6q5VO/zKaQokcygeBiR5N7zZ2DfZyO8BlLdeGkDDmhgguX1/VqM5C13T\r\npnctd+4UcoY9g4NeRdJBNzF+yzs+irMvT/AwSUt0CqAJq9LjdXtlACVxd218\r\nqRw9qp22mRjKM+rsCokJ9z2L9sQqohwibnU=\r\n=Ab9Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkUZ5cWN3YLcXtWypV2ufKVQO0bCV8hdBMDqf/6lARWAiEAvxhwwfj7m+Jj7Hd6qk+DNbEVcrb7UN8hkBAsFu3jCCc="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b0ce39c722f3c58ae03ceff0e519ba5cb1a32aae_1645226802635_0.44751520315550364"},"_hasShrinkwrap":false},"0.0.0-5233eeb0283a7a1029cfbdc3289737e59c23b8d7":{"name":"react-image","version":"0.0.0-5233eeb0283a7a1029cfbdc3289737e59c23b8d7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.3","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5233eeb0283a7a1029cfbdc3289737e59c23b8d7","_id":"react-image@0.0.0-5233eeb0283a7a1029cfbdc3289737e59c23b8d7","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-J99NuXq2EjlrFeCTJLd11IMM+PWClFcTVhkeer/bVK8Zmmcfux1Kmz1B+i+eHXBUNtj2bsIbD5NA9bRY5jYCvw==","shasum":"79a870290941aa4f191005be6c4863ba34cfc8b4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5233eeb0283a7a1029cfbdc3289737e59c23b8d7.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiECu2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIJA/+Nnk8GhJaCSPiTI+ikY0nQ4+Ay+5ViOnR5+ccPbA7DNSi4OHC\r\nONkntLDTAb9AN+3rEGEhVGEv+et5K2TYGdTOYzi0z7gR+yX7MW50baOUw3cg\r\nYb63+7T4S49XY3cN3o773intMTZwRIujR+eW4WqDDd3ZiJmoUFU40yighJLF\r\nSt03vaNK0hCpW7XskLghWW3t/Qbb431fHRcKcfuZrXq0Gi9IVqPCxbClV55g\r\nWibnqG5NBqAH2NRJ+BmdDfP1rckjRp5ag+uKxH99Y+WVWSUHMD92SG0naStD\r\nai/GxMwkkZT6oyDUrQFfh3iP1a/2wWJJtaRAyVnZzqSPuapjSgHOzQN4PNfm\r\nw/e7GTuShlsIvsUsEVeEZGEWZbzsw/1fR8gyNwuRZzcPUF0v+5iSt7xwP6/Z\r\nWCdi41iiO7TlL5hc4cNEn6qCKWOXT6xYPi/Dxq/ejYZOLu23weS7XguRwrdt\r\nFevrZHHLQcRc9ES5jp2YL+g9vwfdC/5HnasuKw8T/fpJhLCNXHaQtTCtwkV/\r\nNhVcaX01gG01+RwJrQaWdWnFspkn7HYtwCKAMy5J1vdVn4cbpWOtJz95jbOK\r\nAiZ9gdg3VyjMGNIwx33csEqPTcfr9V+q2SwIXpGvD67KPLEdNBVrlNkhc2hd\r\nn4wvt2sa8/SQemBGN61ve2EXeLArH6+5Sf4=\r\n=kxsw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkMBlNUnJYsQx7fPMDUN48is6U0Eo0DNvKB9lbIeZ64AiEA/FaLe8fX7HBfKV14pazMOrF5mX0QwjJ3X7nrSZ6veYQ="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5233eeb0283a7a1029cfbdc3289737e59c23b8d7_1645226933980_0.6905075627512891"},"_hasShrinkwrap":false},"0.0.0-e5a290083964017a1892d767e28f611b8adf1ac9":{"name":"react-image","version":"0.0.0-e5a290083964017a1892d767e28f611b8adf1ac9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.3","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e5a290083964017a1892d767e28f611b8adf1ac9","_id":"react-image@0.0.0-e5a290083964017a1892d767e28f611b8adf1ac9","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-WtKyydDASglqbSBcSpCQCYSN0ZDFm4m1KQwNhZlE8HMH2n9mA31E1wjrFSY9sXvXn8a9PVVJoioEuP2f3P7Jcg==","shasum":"3faf236530eedc45121d8a4716f7a8e8c044f5d2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e5a290083964017a1892d767e28f611b8adf1ac9.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEbnkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolhA/8COXXa2I7fPPtEcZD/TFb65edzIUCRDFKAe1JhVSTIUVLlMP2\r\n02QZVIKbCBMGZzv5FRny+qKe3PqcpS+HOA6ixenxHXvVvIFYz0dvMO9ULo8F\r\n/aM34OOF4K1l/hgpEnG5wTQ7aDolgsUIwboyl1fqZYBd4WpaPvGt+71RxL7C\r\ntm/cD8jKL3eCFiRU1yNeDGViTmtt2LxhTqh+pXXqvv09avBMUWQGPeZoaa/P\r\ni6Oj5Y8LTsHYf19uEaz+7zvTlufwjGGtzhrb/U6KATsSF0aRZIDAjpoRPjut\r\nYzn5ahzcYN99TLMGBYvpczOEAtGBzUBdVDCQgU2xmBSZCFiK/+t79L592PXr\r\nRkNY/Y4JyewFaAdvOKD5as/fKw7bgk63TSHucAsZLMDbRaobc/7/jVAUl2ko\r\nCmz5cgX0L0qAbaS/obpAPH2ADulOwLRZXEWYqz7VNsQoMLtDdzEhnLhgEyQy\r\nOaP4ZxmjYiVBvArpNSeQsXMmpIpJPgjoia0POgRgLP62E6rwoQmYlCFXxcw1\r\ngTfPMFXEvMjPIu49pvb+z5L1ItyqRtAiYlBNHT/JzKlUiyXV+UxgpkcMtQJI\r\nXczTP7DBnngLN9f8DZdOQ8d6zmCkLmBNDeBZLqmnV8NtduwTvTVANgyzIGS+\r\n0fk7Bxyr7u+9oNDiPK9WwwbJkUK99amR0Rw=\r\n=fS9I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNHZWYwKJCCQq5LhRS1rI93OaTQzwE2fzGxfqd/eHCyQIgTH3zfi6vTmB+Qx6CSNKmPeAaC882l9yEsDpzr0PzHHM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e5a290083964017a1892d767e28f611b8adf1ac9_1645328868548_0.14559241094411424"},"_hasShrinkwrap":false},"0.0.0-7008f60e159bd42f86f060b1dade940aaaf43384":{"name":"react-image","version":"0.0.0-7008f60e159bd42f86f060b1dade940aaaf43384","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.3","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7008f60e159bd42f86f060b1dade940aaaf43384","_id":"react-image@0.0.0-7008f60e159bd42f86f060b1dade940aaaf43384","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-P92ebmdJ2PAjw1njBkKd5HTcT+xxAoG5gxHCDANYNsi+jrg47b6RzIG9td8MYa+7/rOlkpvE6nFaN7UuyiTuVA==","shasum":"7f93e87cde667b14703d0a74c80747da6f570d53","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7008f60e159bd42f86f060b1dade940aaaf43384.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEbo+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Jg//WhkFDJpAInyrdetmsuViBosD6+bDa6hRQBgz/oRcn+QQDfl7\r\nQjksnUg3zCTAPXnwHVrTX/r0kNisyrstgNzI2FszwLuQGgl0EViamEnJX8jr\r\nF5v8sSWvfSpODGpcmteSgL+Qo6D3CNsF5HqaKH73/fbjkqdWa/6uhZTBHzhB\r\nkhKcIPifEtRy7K4aiz+Cf8Cnqc3aQLOdUtOI4OTldqs3rX6PyF4k6HV9ETq3\r\nrZFgToTk8tbnGwAUwyG0FWxV10wg4jajYzLLmozpx92yr4xLv4j00GYze3Rg\r\nFBbG9QYmoapS2nY1hdwfwSrNa5DJSbCMGnHlirWCnTCNAUVispnVT9jI7NWr\r\nFkfKTnVBxBIkd1q5ZXROD8kYAY3XBwomFnIFf/ikkSt7U0c3ekyH7ChiOQkk\r\n/bJx0k0IF7etyZViFgBnta86lGVNLHrxdg52LFQTR4GO6tz2ZgHxrGCb14fu\r\nTP4P52y3LUImNkctPrNBo3RvAmwEUT9+/GMlo2LkAkp5YcQNUsxy4XRyYH7P\r\nzOSFOYIhguUhNxLuoQyF1HuF3qU7FONMML09EXKxWfOcMdHZgqOBVez5xZYz\r\nIZrydBLHDaevNDJH0xFCogJ4EGD2Xtrtm2aOcKv0S3vdMpSBewf3IP3lOUf8\r\nDcIv2l6PL3N+47Pz5XjnJMRgGxzRn7C0yCQ=\r\n=EXzn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICB6OP+vmqr2XZEdlNhKwA3kvq8PY8B1Tb6K7C0lE1o3AiEAzblvIoF3WiW2rKWZNBay684xZd2ttTNpJAixwfZYIZE="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7008f60e159bd42f86f060b1dade940aaaf43384_1645328958104_0.08196295464487768"},"_hasShrinkwrap":false},"0.0.0-b6135dcc4728a1b506fcaaf924121e5daad002ed":{"name":"react-image","version":"0.0.0-b6135dcc4728a1b506fcaaf924121e5daad002ed","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.67.3","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b6135dcc4728a1b506fcaaf924121e5daad002ed","_id":"react-image@0.0.0-b6135dcc4728a1b506fcaaf924121e5daad002ed","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-IsSB5U8BIZNd89T/6nQqrySifXGcniLwMicwWWCBZUApzcnPid9g6+MI52SPF6dMXFlC7mdp3FBMBlr7rwzRkQ==","shasum":"89738042a71fb56b94f87a662da1a8b20fd23700","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b6135dcc4728a1b506fcaaf924121e5daad002ed.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFaq5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphjA//UusxJOoXjFOfulq5qyD3UyidO6ENxBbbGPbr/xrvcQsgjTPV\r\nAKCcDirX6C2rCXIzakmbllTHvayN5dAjNu0FCO5ERaqKh4q3/iJv15YfJ0LF\r\nwAyC1yemFAdmY/NwzEY9qEWCXOYTvmk8SCRKbDAMG9sS6NOrz3r+vD5lJIdj\r\nNwlBbnA7EbIik4HjBKO9FO6rMalHPpMHbbbe7fNo9EYCgTQ2m+sE+JubxumH\r\n1p+I+irbPuVtKrRgysjWWVeWUBTHRI3YWWTWgn5VGkuynDnAlXrDh1aGIseN\r\nKQ7EOUoC7NzJeB0PIHqNkFimE/QpZtBnnbc1WglVfC4b9tsFcSOghfDozVzZ\r\nCQpKy0eyZeJjnX1TTsnvwIgef9CTmi+QEraS4aMbPll9jekW0nwGBCWfZ/SP\r\noWNLXzbUdATzV4mR6m8YxbejhlVA2CyK0COMJDJT8Z6L9hNJd55vhkgaYsP8\r\nCX4nYcBdt1H+5Y2xWP2Xc8unkhUy3XLJrXoWSV1iH8a4WFYv4jCPt+yFc+jD\r\nASQdKrq+EQs+tb/KMYC9LKDiAVPvSQeJ9yVBgswDIuvr+aSaElpfr+FCrplk\r\nrNN+KaMg7eryrFgks1akhsgBmZdGH4SIX7pSSks6LvvU7fUfUswEBA2JGIuO\r\nLWAFtmmM6RJ0LrcsET6Whin9+M+FySacyM0=\r\n=b5Aj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRDOiAZdtmU6EFVnnGkmdnsBVuiGtWIPvxO9h9TGr6SAiAtdUadOWcF0YqcTVBpnqkNO3ysFSUD2YhLz3l+3vgBjA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b6135dcc4728a1b506fcaaf924121e5daad002ed_1645587129113_0.2914244982971472"},"_hasShrinkwrap":false},"0.0.0-d05382eba8f8cecbb8edec392eb1d05f0cff5653":{"name":"react-image","version":"0.0.0-d05382eba8f8cecbb8edec392eb1d05f0cff5653","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.0","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.68.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d05382eba8f8cecbb8edec392eb1d05f0cff5653","_id":"react-image@0.0.0-d05382eba8f8cecbb8edec392eb1d05f0cff5653","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-FWXIxMJVY6HL8wNlRpy6Z2wrKaks+Q+YMWbOwLBgirdSqhehZK/lj+3KiMTo8CLvDp8yAaCYOmyB+Y0Iz5o67Q==","shasum":"1906a0a8d57141c140f9274b212e44be9eca3eb8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d05382eba8f8cecbb8edec392eb1d05f0cff5653.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF0PbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdyQ/9EmckzFSSe8nCjmULriTWRODckmLk+9siYw3VNzzaP02AZ6Xx\r\nHaSkxbWZmXfsoAcfcqgfzCK6hWr4e8uzndSmIlKDE076WcaEUVEMMgD65hft\r\nvhosDBYoE2V7k7XgnKxCJXWvkzz1s5x6dNHIeW4NikPPgPWj75/JnK4j2Aab\r\nPhYvz7mRjMwa3pVTNX+3IoqFoLUI3ouYHnYVqoZpmpNJGuVGfahpxUxybcg9\r\ntpxUgUX51OT+3mRwQS6QfhjAFfcm6ghZdDnInuLx2rFyXjWRDAqWqRsNAcuu\r\nnSaFLE7OjoVz82pFmPSDWdFAQ+Nsf62fxdzsd84cbz2PZ2HZtFQL+GLPevdl\r\n6UmbTlNbhMUpHEwDL7F8tDNhaWDYznAUCmZMc2B0869D3dxxFqdYKcpWZIBE\r\n4tXDRCNxR5ZH4zAxGBU6Dzi6oejx7kbNK9bxk19vSx6R2r7+Q3TZXFd4fRrZ\r\niQ9fiRwwUjOFL8HVEhpfTf0vGv6GNrMEfpiSdVSCbNIKHRqZlcz1fD7bCOPf\r\nxz+bl80CwtO54Z6rljYLJpvfIs2uYhBISuolVO4Tfo0j1tm2ZvifFQG7yfB5\r\n+7utkHh4oC13mpT7DAwTl7nlVgrsnJ0oJOv/nEhEyu7Nb006g8gal4JDumUF\r\n7478ZegYsNVb/faj8TsYyHMxgRz5GzqnMyE=\r\n=wI6O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAT0Ar28s0BPEe2GmGFG0YKxW/VmYeEmXYsH5Hk0X32AiAIIEl0YZn4yUN230urH++XjpmddhmCZPQVvFgqdYgRZw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d05382eba8f8cecbb8edec392eb1d05f0cff5653_1645691867656_0.14580186624715363"},"_hasShrinkwrap":false},"0.0.0-584e59c2f1158c38d780a829a411d06fd2c7ff67":{"name":"react-image","version":"0.0.0-584e59c2f1158c38d780a829a411d06fd2c7ff67","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.68.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"584e59c2f1158c38d780a829a411d06fd2c7ff67","_id":"react-image@0.0.0-584e59c2f1158c38d780a829a411d06fd2c7ff67","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-nucQgBd3J4cnIFrsH+Ky2f3U5PUK+OpUdzf3YLBFhURm3F62l4vKQYQsyhBmgEwIteStO7zpYdldedSsGcgcpA==","shasum":"b146a130ec85d59e14c57cb96c7a7f52e1e5dbc1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-584e59c2f1158c38d780a829a411d06fd2c7ff67.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGMwGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq73Q//aHy/FpudZGm2nlZnhP3JzOzLsyDd+Go9R/EtFkzQWHtSC3CC\r\n0lmgr1i8r8dQ5cGv2m6pWnX2q+YQ+oMeiXeUuNLLekORr3KiuxdBkEshh7oz\r\nD9clVcPg+KWdHwdhfqWcBsYzxGkOsFpT5E8mqG/Bc7qW6nS9acNMeCKGyvBb\r\nQIq6eT7sOs9Dw7oMdS64I2Yfzx2IAQc76umSZSga31via7IeeXQh042f8Mk+\r\na+XdL7JgIOU/Pam7UDyBtv3YTkdfBB5NpSLSuJOfoCSZS7quF28zR+VMtFY2\r\nbVZIUeW7gFKPGr3xehFnBjWWy31BVm1QM42PJ2fTlnXHApS/sKZR+iLw7YmU\r\ncCthoMSP9iTw9VGLR/lcmtaRKGe8Qz7+uEpjdsO4kJO9ARiDMawXt2RuScpr\r\nNJi9X4t24uDtqlu2aBtpKvBMVkJ7dbHt/zG/80DsvqUspVeZx2/We75zMF0r\r\nVxAYTfon6RWvMSssRaAPQDBWV5NSsuXG8WWVGT31LBpd6B7Y+ItQtH28LuLi\r\n3Lt1LGCgib+/FMJIGYReZN9lc6QxnJ0IkvWrptFz5XdsX5wwH0FggXbrz7yT\r\nnlBIWZKg+u65wMHFabl1TkDGBFdm5x2/GAdv9YDBh8MB4mw9yANvqzxCpUAX\r\nsCZk8F/vnRTHquwqN6HHsLnJvbnUs2cxkfY=\r\n=Wqvu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIARfrcFvykNFHgDzBYBl8KwWZROxtMFBDSJVoJ1PAyToAiBDfyDYURLGgplP0tVjjePGtRV0PD7Rj86Kz3YpLYuKaw=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-584e59c2f1158c38d780a829a411d06fd2c7ff67_1645792262565_0.9648409266990314"},"_hasShrinkwrap":false},"0.0.0-1177ed1c0c835b10e0ee6a962b523949eeb5a61e":{"name":"react-image","version":"0.0.0-1177ed1c0c835b10e0ee6a962b523949eeb5a61e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.68.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.5.5","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1177ed1c0c835b10e0ee6a962b523949eeb5a61e","_id":"react-image@0.0.0-1177ed1c0c835b10e0ee6a962b523949eeb5a61e","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-i4nPwDdg25Vmc3Q0klWExmOCR2J6SlX8ejJCFLZnOVNTclA4kerWQ5nZ8RiDlnpmYbzNek9E1qAdye7cDlJaCw==","shasum":"3adb0f5390c7aff561ea5fc305861160702f28ed","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1177ed1c0c835b10e0ee6a962b523949eeb5a61e.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGkiEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgOg/+NaJpwQIAdD9P7hFHRJBk01nucmIG7tMRqaPnykCA1dDqYUAA\r\nb0LETVuWLSMAawLJX0pJ+69bItIZqK1fb6JKz/EkTtcYLZK0rG94lqD8fLZT\r\nTuIhrNFK6cTZtHayisBuncUQKGDh0NfttsTW86QAvQy14k9eyCcgphHwDW9U\r\nrujtM47M5Bheia8/sUhuftegvfKg3lOCyt1KFwjB1xiKjr/mk2WuJp3fUjPa\r\nmDEGu61rBuOIfKnboAeBoomSnwUxkDlWt6YeIhklgYtcnzafxaBfFZa47amU\r\nBgraH/2b37V0gstDq/1Y3L29BFv19RnOKw5908tUsLl3MxQ3C1kIiNDaYS14\r\nBKLxFAwfFfr7GYRjK329UoKJmQ8LmYiAfiI32umaaR3PftH2kWDnerhAVsC7\r\ntIXta6IHPFfmjPXUcfZUemgQ7A3/zN4iRrDqBCI9H00/jbhVwtoB0i9U3e0O\r\n9vU/en1Y5AALb47fL35+uAH/W4GHZEYxFuge0+MaDRMsLpxBpMw1n913HEBB\r\n4zQXNzcexecRhXPPOGm0RT1K+eQR8mVid+7BphBznIto61McTucPpBrW1tM8\r\nUUaxbXcAkGqSCxv9dEY/Xan9IhvFddMeRBcqW1Hddi7GM/ccNwpcxNe2IGj5\r\n4NcBEO8tl9uPesDgxdQRVdldLVkGVO0eI9g=\r\n=fzZo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJyPI6MNMle+7UOziOBH4PDGfhb+iGOzOmR51tY2QIzAiBDEVJ301qb05ocAcvX+j3qhUx7aQrRlA9RWzhBc4nb2g=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1177ed1c0c835b10e0ee6a962b523949eeb5a61e_1645889668008_0.9663415050738349"},"_hasShrinkwrap":false},"0.0.0-c6f143385c4d3308753afed94317b70ffbe2fad4":{"name":"react-image","version":"0.0.0-c6f143385c4d3308753afed94317b70ffbe2fad4","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.68.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.6","typescript":"4.6.2","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c6f143385c4d3308753afed94317b70ffbe2fad4","_id":"react-image@0.0.0-c6f143385c4d3308753afed94317b70ffbe2fad4","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-xY0ZmBSpwYwgRemv1h4nVVLuZmPQYKc8Om4+Z2anOhTp1pkMTcELCncm7McyAQ/QeEd3rTs59/LvuuZttRbDeQ==","shasum":"5a947263d2ef14ff4956caa3061fdf973fe9f556","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c6f143385c4d3308753afed94317b70ffbe2fad4.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHzdFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVRA//a2ucc8frTiLdEp3WKS9gRurGfbYqVy3iqwP71RBJbERE6yI5\r\nhavWUxGvnqXkwpEQXLlfUd7D+tj3ogO7K8ctcM4gIB3YdCBFm+s60Zl0S+XG\r\ntQnWz7e4SOfRbqp00Hsw7so+2c4LrpWQM1olXyJF3NBmndhuI2XJNWOIyUfC\r\nLu/mHXkVuTT0gVkyx2y9ilg7T1G8cCUOMPX6TPPxnEJV5zxO7FlGl1bIqXoi\r\numUx2yY7E4oD+x27LVKn647lfjdLZ9lQnA4MCgp19Q9/VBCTQw1mDKeeWcsX\r\nY46Crto3FOthsyBtqwUStAg3/ILETnnGi/u23ZiVqL/sZzPBDIDNrbWJ9evt\r\nXWgZvNRuaCPCrQWcTnTXVJF1auf+TyTx6kSX/WGzFdDgP1LHnWp9SSqtVM+A\r\n/C1x96XUbEZLJfmPEz87mcsij9MFwO97+Rey/kecKsKjQNZ0d5OtHttPLhRF\r\nWYYI9Z2inbgaS3BbxHJp9lOvRFMhzO6w+8//0I4SFvuOtr+NAEdt5kkA9M0R\r\nyee4A86lBZVL76YK8FN9fehMYTxpPUsseLGK3MHJ3/WRkvLqj58cskZnfs9A\r\nljW45aXdgXQKyOQ/gFngA4UEIfBNdG/tC7iySVGSwUo6IEIeROlnEVHIel8k\r\nI2tZ4JcPyG8VZOnKIgPNEz4gdmVX0sWOgDo=\r\n=J4As\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvDyPUiO/Evwkl10UMBHqiPxVLgcS421fv7MTdOEVLJAiBv97EJa4EFPeMgxSijVbkVwWVEDPfLMh5EkQWjOL9xmQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c6f143385c4d3308753afed94317b70ffbe2fad4_1646212933538_0.30617311678574355"},"_hasShrinkwrap":false},"0.0.0-0bbec36469b2d89366b4f32fe7efc8190625c2b0":{"name":"react-image","version":"0.0.0-0bbec36469b2d89366b4f32fe7efc8190625c2b0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.68.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.7","typescript":"4.6.2","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0bbec36469b2d89366b4f32fe7efc8190625c2b0","_id":"react-image@0.0.0-0bbec36469b2d89366b4f32fe7efc8190625c2b0","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-2zfSKBx5hXzKJQY5GKectrwJERfjvHNAzUvImrFvW6bgC43iZIVkTfag7EN6zGN50gnhcltnDkOS9owSTgOrgg==","shasum":"aa1944cc823c2747bfff87470d8cfb9eb5dfe552","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0bbec36469b2d89366b4f32fe7efc8190625c2b0.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIML4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokIg/+Oji2YIrsUrS7RpVA6ZYIZlWudfeqllQ37mk/OFtQTAJlx2c3\r\nEbsxTP0zRNUhlrM53GqEcl3x5abDGIeBjA+FURT7yrbGZ3Ayuq+XR6NWfWkS\r\nnKW+pMU1rqU34ZUXmYCmPvjeU1vo99AWHtLx0cl59dvKPD1LaN2sbCg9dint\r\nUF4muZuW5WtDowb+E2KaoxMrYDKy4ExuMlT2/KCTJYkwr9OB4ylZr5rFhCxH\r\nHMHPwFhoqFUDg06+m0lFhelQxFmyOcp+vh800NynsGqLG6VR8wWs9TC1ORUZ\r\no1H6Ze9yrtn3CA3L/eKZ7D9KS+obQKUWZSnDBpm08HJKHJDPZk7a6DvqfuKI\r\nu2wdkdUe3r19wpsBplIW09wazAdU+nAMvdG1ga0koX4hWE4quS9ximl3IU0j\r\nI6gNT0Y8+4W53HqsunzRkbs5qpTl5fTGIjcJoZFhAo+HNm4G/fwWJhOwQiql\r\nWIZPgBj93IauFiQDacS7eols6mBvr8OIVURhdGwuZgrgJH7e8rW3tfxO/pOx\r\nqkUYiU1o5OmyCn6sSmQnOKfQl1T1UdI4BEaG1e0ADY+SyyPht07kCCVfvE0l\r\niCgq+q+AK5QggAm2u+2GyxWDAp1FiQKInBStBQmM57jDZlvvpRhH/ivg2VUU\r\nnYhrWoBKU4wkiXjtQ+6rFvW16iyFjcnD95U=\r\n=zhe+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnthSu1Obhuko4jSvQufpjT1XYq0YwFjsziEnrgGHUpAiEAs2eCPTPc160hq75MeiDWDkCk7NXFKSwUDyL+Rq/Ytgk="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0bbec36469b2d89366b4f32fe7efc8190625c2b0_1646314232200_0.10518269692202487"},"_hasShrinkwrap":false},"0.0.0-b7fbe9e5a89c11837b522f6fb7235806a1f7d858":{"name":"react-image","version":"0.0.0-b7fbe9e5a89c11837b522f6fb7235806a1f7d858","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.68.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.7","typescript":"4.6.2","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b7fbe9e5a89c11837b522f6fb7235806a1f7d858","_id":"react-image@0.0.0-b7fbe9e5a89c11837b522f6fb7235806a1f7d858","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-+htu9gaa0DgAWIVMgfdP8pIu7QSyEg+qYDVWFE+7rePFl2IJP1HQfp+/8jiUfuQFKqQXij7FV8kmam0iV5MX+w==","shasum":"6dd9e38998e70eac9d5a634e1fe5082fbcf5b74c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b7fbe9e5a89c11837b522f6fb7235806a1f7d858.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIMNYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotDQ//cH+yG6osrJYiNm71lFvowwICM7ss28H8RvdKFvKv9B2n3mj1\r\n0KxOhxf+zGJ1UTgzCEdxEzq4GNH/F9aN6If/fTYmZE2qS0b1/gJRapRLgjTQ\r\ntsM5Y7kc/cW6gLTQGWMbvusW1M8n0JT8TU4mD4HS9ERFZQyacZaipod3Z2SW\r\nl9WTkQ4++kv3QTMA2hHeikoYSO/mE6/CBRe2c9IRms8MX9PpmtyJT7oGoU0e\r\nieYRl1AMRB8+YMhmJ+XEgMHoi46sWsCfZgnRvwVRrS8//eV39yibweKumLNF\r\nsAW8IH+NL/4zRFnJ9GjqgH+YMiGHq9b4ZxBSUsConI0YT1YvYJscjVBUAyei\r\nAW9vFi6H267EcugFoqRAPXchDGYcdt6prolu2t9LP8mrEifpat5XawnY+Lde\r\n01Ce0khkLH+xat/Q2Oe5ostQJMZ3wM01Xc8FqQjHCYOmuE5kDwl612MS+yxV\r\nM7q8aCOmP/Pq9LUl8GJQemRt6QZgv/4cr/vOL8c5WLYxlzbcZV6CEHKbwk2m\r\ngQC8KY8iioMZr/7uvVSVArtU87EXs+WD5MOdCyx328KbuvT+j0UJqRKheBRQ\r\nrMQ717Nhm65claDETxVU3LNSgRY87l9RSTSJU8l7H+4Nr7YTyiFzI5lC87/3\r\npi49r3DD+XNWE691qwNLUcUSDxrRx+4gXAw=\r\n=iNBO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW5jAwHlKTYfCHTznKhXLke7drwl0ux79Wq9CUnj38PAIhALTLDvfhoLqIE2OGWUcTFSRjxsvA6fp34sQbyNtqpVh7"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b7fbe9e5a89c11837b522f6fb7235806a1f7d858_1646314328523_0.03240229292162344"},"_hasShrinkwrap":false},"0.0.0-15a54e28f29e92d8d160015d7403592f8614b660":{"name":"react-image","version":"0.0.0-15a54e28f29e92d8d160015d7403592f8614b660","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.68.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.7","typescript":"4.6.2","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"15a54e28f29e92d8d160015d7403592f8614b660","_id":"react-image@0.0.0-15a54e28f29e92d8d160015d7403592f8614b660","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-mdGcxJcY190u2dN2Sf9JiPXq+U5ZtDqzsBc69Rjl9EdLImCqxbtaowR7Q61Ri6rr4K6qatPFKvBAUbfdRFjFjw==","shasum":"e5a12b87e32cf3583419748d7dcadf4967888f52","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-15a54e28f29e92d8d160015d7403592f8614b660.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIj1PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMwg//YE59Kf2PCVGUBgWGXLLvmkLUrgIefgVpfO8fON+TDhnEsEk2\r\nHx95uzYMd2wseGiL4rfm8SZvX2hdTTpgU/KkFXZivQVF1Zq5RxZxijcp13oK\r\n1hZO9aAUBbb4DYCVv8UIUp3CwB6u38pA13L5y18kcoHkvDjt2FygqgnLpn3g\r\ngBwe/NN5WhfS3iMBVH75p4hjXMVlsfUhAe0fe4RtM5KMsXxEdlz3blEpHUL/\r\nA2UGM5Ta/+6S5mBpRSeNrIGuMaOHqD64A0/tTjTN2qg5NHelnM4UPI9oHjl1\r\nFMtMzY60mG4LTNcDqP6foXggJ7PZma4YpqooH8KWt5eC9Ukstpn+SAyxr6GZ\r\nP2n0JgVo7xN4SkkAuOGqq1XtOJKRzOZoXj57zhvNmwbK/WI4aF9pXHi25egI\r\n/WWyaok0iK9kMOBaOiVRxSpynCwX2F8mhPSSIQ3NJrKhYc2Vy+/U7jwopXup\r\n0efIbQ5GPFCcVqlZhgGBM6q1YlCYFI7dSbSy/2bbFBSTais9TASElxIUqNdb\r\nisdPAHCK4MkwB9XoTZIHey62zBz+/cCitA2NZODQX/m1VQGcSpfy5sUsvK/7\r\neOOHuU1j7Ak4SwNk54/yEJVzw6JoFW9E28/9ppvGzyKTw8n4gVOIOP5Zs1vs\r\nqKfv+GAGsxDHd1ViNjAlECX4hXXjrmMB+3c=\r\n=3lJ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZROcAw9/RAq6SAo3afJkfkQ5D4AL9OiE2XUCXUuwyhQIgHwb9bByIJK2xvwwpRA+6kmNElmxuH20nQ8PLSl5zfSs="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-15a54e28f29e92d8d160015d7403592f8614b660_1646411087335_0.3587152023834157"},"_hasShrinkwrap":false},"0.0.0-10570905055b72b0454a43829360b121575d614e":{"name":"react-image","version":"0.0.0-10570905055b72b0454a43829360b121575d614e","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.69.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.7","typescript":"4.6.2","webpack":"5.69.1","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"10570905055b72b0454a43829360b121575d614e","_id":"react-image@0.0.0-10570905055b72b0454a43829360b121575d614e","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-hQd3dn+z+IOu+3nqlvqRCSrVcuLb//ETxSi5e9dicsvPZzYONvy0oK9+LcoWmLIt9+1rkAZIicR9NVN+d51rNA==","shasum":"cc20b64312103a7f2cf7ec6a92117e37488cd64d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-10570905055b72b0454a43829360b121575d614e.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiI89PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT3A/+N9ah7pPamsewistsUcZl1fNh8a1tW4DXy2EbIYJQshsSPSU6\r\nh+dXA0zsTHqtB4UpcmXfjq/7YW2jX3uOjkCrzVPoLXHlfZKqc5u0dPLaSNWy\r\nWT77neVTKgzwi5N3H6R1fUMiXR0pPIFH5/7Zo33YrQGDSpV8RNxP0+zHFKpo\r\nmVygxpv7m1KHOFdIAkBMno/bKQxxBX3he7p8t0QtQtgCACrf5eEUcRS/X1sz\r\nD8V3pVJ4K4r2F7wW0ZFBYHwkBnFQ6YGUSzdvyhSS29iPVDmmAg8BdiI6NBhM\r\ntrJ7yxeDWnGaiaSM6hXIb+F1esj1bh4WRoBTo9NXcKezu+ekP2AxGBlyM5tk\r\ncr5HOgpjFaqCAO78KjRPqg1HblEuv2z+Rt524fMu5HaX6JzbvRaJl5zvrJeD\r\nvRbjPIGzDrp8rIcNIFdrndjIWDRfuuROgm0mPXz1FHwtFazWl4PfNSoqnUqF\r\nJCccC3N4+oBNFHVGixh+634Km01uEpjJDx9gglwqb3VMRHSjRnkSoi03EhWN\r\n/E0n1iwZGDR2CocBS/csgvjxte7+hpE7/5NtaOrhGUPM9C5QIRErqK0JcdG0\r\nFx3t7gCpcJDxTn5E7Xoux8iQsKH2qgKlR5QSzAaeZuCqKMmdZmciWKGrMaB7\r\nWmryHbaqk64RCI9QJwFNm3EpJ7AetV6W3QA=\r\n=aYgX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYKO3Tc8te6+xg+zSG0El5/+x4ERUr43zQVg0sMZ9YbAiA09TFWPeEkplbM0Fuj2NPuuBqr7hZ0hnMvuMY9Syf3tg=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-10570905055b72b0454a43829360b121575d614e_1646513999011_0.34577182311878873"},"_hasShrinkwrap":false},"0.0.0-e20de00b4b479e1820a69b323e2a9cf5ee9736f4":{"name":"react-image","version":"0.0.0-e20de00b4b479e1820a69b323e2a9cf5ee9736f4","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.69.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.7","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e20de00b4b479e1820a69b323e2a9cf5ee9736f4","_id":"react-image@0.0.0-e20de00b4b479e1820a69b323e2a9cf5ee9736f4","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-av8Vjmp764mU4emwPZPNTE36prvB7bvEaG97/3XnekMRLPvI+3/elitHr9BWxvV3glc8FS3YluU2GvwspCmcNA==","shasum":"61d1ae1809d00da02967978618ce7523d3c3fecc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e20de00b4b479e1820a69b323e2a9cf5ee9736f4.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiI8+GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7eg/5AM5bHis7MrgLqDQ+uYVvOuQx3RmpSz1S1FH7JxLXrGDOp/86\r\niTapOlqOH5mWg29bg0QqUp21qOecUn1Sv7aNH6JHqw+viy4L4+jYeu3lOLiC\r\nnIeiQ+ZMkg4FR2zm8c7Aq+dpQqwQbkuhFjBkK+NeFC5KT33Uz2x0mbrpQbn2\r\ncjKwzOuR6CxBZS+syH/bodq2wj0+LRfzpTXxKakv80Idgo2P6XPOmqxLy71K\r\n3sDTIlYsIirEhvuz3QbuT00c9K8owcelt4RHVlJLTHjDXTYsafuaHpUrgE01\r\nOK4xh7jDwrf88LdwVqTtsuBn8M4tIwaxN4cYQXTn8RaOfOYM99bMtZJJSu0F\r\ntB0tzLEQGSWup6RxmP9ClfMlTiUagfXV+37BCABW5jWCcSvAWyiPjo5j8Pt2\r\n6xlxT9h0PKdGUaIGthjnC7AoEubSYlH6pv3hc813P/3x4I0YjM7QvPWKFcTj\r\nmHmawWpMIwYbtnmmgExh1aW22x1Vx7gpuYwGzYUbyvgj53qPAufDg01WZHNP\r\nQnL6RnKSEx2o3MetfgvtiznLnmEK+0V3u0jKKSi0yPhOyhhq+piRncJ0S0wf\r\nxNMhxnByNpC5S4PQdqEF1WmHsXAdya8AqE3nuQ3+ecUtMOiAhrGSzy3B+ntm\r\nVnf2cZuXcGWJHYRcYu3rZDNLb/+UTdWks/s=\r\n=qrvm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrwkLNjsh0JuwDjWPcfd9O46Q9yiLJ6dolO+Or01Q3/AiEA5CpEyNgm1ghQgQy/0iljfRcxyz5EhNo7cnY9rHqouqE="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e20de00b4b479e1820a69b323e2a9cf5ee9736f4_1646514054275_0.036272711034322835"},"_hasShrinkwrap":false},"0.0.0-ddfe25a5fae166d8b0ce473ecabfbad9c7c69bc6":{"name":"react-image","version":"0.0.0-ddfe25a5fae166d8b0ce473ecabfbad9c7c69bc6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.3","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.7","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ddfe25a5fae166d8b0ce473ecabfbad9c7c69bc6","_id":"react-image@0.0.0-ddfe25a5fae166d8b0ce473ecabfbad9c7c69bc6","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-MGomYplbQAoqQH1CzwqQUtiZErZx/30pswtQPUVA93qGEbL+0x/8leqDbV8KP35RXlGaw4R+kf3Fres7pdq/gA==","shasum":"cb4468cd4d9ed451b502e50e3bd00783becded79","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ddfe25a5fae166d8b0ce473ecabfbad9c7c69bc6.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ9nVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9hw//f1+JlO3pacPovoU4ehTooHDnMOyi61mLLC2uiFDGeVZ0QNvb\r\nwc/mf08GJShdh8LRoB1u6vpDMHOgevk8KCB0RE9FdD12ezoKNjmsmH6oRp4j\r\nHdVLDB20Ul1D5F8oV0cdmUuEGqRjyDiUue2HX0gTvyERaq/EVWEDMdYBdqVY\r\n3WMab5KddrzVr2So0u5m7IYasClWKFCshdp6JCVI8ZIgphsB5ZV82K5pb36j\r\njgSbEMorBSSZzvbTWqZ73XNctfV/dyFiQqjEg9BajJPk7rev4AxhhM1M3Hc3\r\nCfYJLGHPBvjfLY+/GTEhzBNCc3G2L6YyGJo1Bd3v3GyCu4Z7Vn7W+oEDwalh\r\nlo+Vcm77ZmfjrvJlVAIdry8HW9uTE1e0stThzkNX3oVSVnZh79EHQpZYnRvP\r\nIBljk29m8eDlJnS4G+ZaCzYFUlu8FSpHgWY5M44JMlEpahVy+MLFxQIxD6as\r\ncYupckVVODxSRdM4cXlmrgC2XccMAxpsyf/dMQkOXlU/vhR2wXV9urQfElsC\r\nnm7n/gtVjlatgLaKnWeJbz19d5noXOfMigqyRgmo8kvRO8/H9HR5ddRzsH4f\r\nQFQdAkflsSywtKdAjYAOtI1ELLhH8Eu3Tpg3+poi9+C3Yszpm2cak2etds7u\r\no/eHWp12YeWfTjhIwzwOfL2nLKC3H6heoto=\r\n=0iPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmt8RwZCwbiE5polHr+9FCQVd1pPfrf9/IDR6C3xQKRAiEAh4sv05edyzfA265LM5j2vom18FdLlmfuWue7OGmt63I="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ddfe25a5fae166d8b0ce473ecabfbad9c7c69bc6_1646778836871_0.2179307124934462"},"_hasShrinkwrap":false},"0.0.0-760a84e19f352e774e1c51b814b4588bac719303":{"name":"react-image","version":"0.0.0-760a84e19f352e774e1c51b814b4588bac719303","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.39","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.7","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"760a84e19f352e774e1c51b814b4588bac719303","_id":"react-image@0.0.0-760a84e19f352e774e1c51b814b4588bac719303","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-Xw3wN2Q1FKiBf8dR9bIKtBvcD6Zb2hIMtaKh4cgijfAnxg1Tf640E3KO4klnnHKISpaAq3Mg1M7ldoFepzkSVQ==","shasum":"b9c4d9bdad38f98a3c5d8aa8ee1f67ef2d4f98b7","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-760a84e19f352e774e1c51b814b4588bac719303.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK6CJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru+Q/9E1RVDpKn9/RbJ8StbjsdPADzAZuQae6h/XDSjhBK3PYKz9q8\r\nzeIT/DHvJeHym4GdBpprMUBTI6gY8Eq9AYQZ7vnWarMK//zvTyhQKKYJMg3a\r\nuKABqcgFACwgUE5RC53bQ8G/x1zbxr99cC3LM6eAKqHQKqH/+vWsrXGKmqXH\r\npkDa44Bi/l2qH792n/24DJwVf4r87OEXpWLcPvMVR/i3TYGCKJwVhMTGMila\r\n7/s57XMcafO/TS7msOsYyLKI0OdqB3pjNRRmhsWMNzamt2lXA5Du6YEyjiIi\r\nyrLxH7ESZ4EAuLRksBhH4/tVAO/avB8QK5z2J7JFSrCV8oZr9myEcQ3G8U/+\r\nN1nunnLToqlVjvK1GUp6d/k60gwbAS7ABZCi774kN48WJ0/AWXsVxFm0vaOJ\r\nUjK5eB0aIvpY4gYg7iSU3A2vSIfXhyiaNxL2Wikw8aAq0Z/vXqRYRvAQnRDf\r\nwmCJoU1h0xhinoGztKsg5heZFqQTS0hsIWMEzGRwrXcVtQdAzHJO54u3Pnoe\r\nfuVjyUp/BSE/8LHQolXnA9t0qThigQDlZLT2y/25QYKcnw8qeqkepoypgtZQ\r\n8J4a1HmaMKbRPJ29VlDhosKBa+J0No/isJBAh0NLqESqX3JrjOWYyAMoGJIs\r\nQ2BZfUFkZptLOzZa8EPc1u7vBaCwFc/O6Eg=\r\n=CFLc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICy+dUlsZN6/+YfH81Vp0DXTkSCk+JyhINSPfso7dRUEAiB0N5j3FaoKbUklzU9Mtb2CgrBpbs4wNe2ZL2ohpASD3Q=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-760a84e19f352e774e1c51b814b4588bac719303_1647026313333_0.7934217384033633"},"_hasShrinkwrap":false},"0.0.0-11a14be089f01745cca54bb70dfaf56126ff562f":{"name":"react-image","version":"0.0.0-11a14be089f01745cca54bb70dfaf56126ff562f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.40","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.7","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"11a14be089f01745cca54bb70dfaf56126ff562f","_id":"react-image@0.0.0-11a14be089f01745cca54bb70dfaf56126ff562f","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-V80chhlOZ4tq3O0kG0LPu/dkbDOi/X3Hfvxgt5nG+NNMQmCPmykZVaHCER3cVD89OmWzWXKNXW8VTSw4tW75tw==","shasum":"bf9e1bbf880f9a5241772bba57a65072ee87f83b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-11a14be089f01745cca54bb70dfaf56126ff562f.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK6DQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRmg/+NSRD+iYOjk4tqV5F/XoLrdUt2ypZz8KIutdLP5AF/ZmKxuRy\r\n7pRk/z5M+sZdh6XC1GJAUAid+CTW9NaZWrHX+mI2FZvWmeAgSlgYL5wCUFof\r\nMMPU9s963UGXNGsNTBj9QK/5oS6cV7eTi45NvFEB81ToBZuYQpjstPpsaNOW\r\nfFn9dpQRx93/7hccbndOCTgskjmDpP9C4ThhTWmeO/vF2fKQ5+ZW56QRoXw5\r\n0sn9pTq0I5OjcTczYoJvtwwpin3ehZHE6yWQAvgLDkdtzc71lcy2RSo5I9cP\r\nE0taPuQVTjUMnjIDcooVj+Ip3MnEYFySipqMB0xPNZe+0Fld0iIgMfZxui3d\r\n9GL4OVaM5v4fwKJFlWvbTP46yMT+Usk4rVitgficXZxVal4xqrqJP2VqN94O\r\nwpv1Fvreanjqki5lu/n/Nbiqio/bJOFeHjVQHSlWjMWZgrkWCZcyt7J/uGp9\r\nG0bdHDNxxh03jy/nE3moWCuClrbYasipa1eAAakNKaAZKE4512NVOi+zHk+e\r\n6l4Y1YrJ1fmi1wczPQoToLKrvtlT3bPKO6weE7qDgffb23Ftr5z0wFKvunFx\r\neLkB9hA+Edj5c2oH9IEiGaQHjLJifSxZAbUUM/IurzOpI4fCUraU2Nycg2BP\r\nU5OQVk+cz8esfiON3WqYAEkTPx0ZocmiRvc=\r\n=REJ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZUGn+IoE+M3MNn0oj/6h7/MOXw+PJXCJwAEEcGVy7rgIhAPwbfGCnOkE08HOpOyGU7xO4u+q1LGVwTFedp7rA6Xv5"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-11a14be089f01745cca54bb70dfaf56126ff562f_1647026384319_0.10924340236005681"},"_hasShrinkwrap":false},"0.0.0-d127cfe469e41c1f8658e57d2638db4c452a90d3":{"name":"react-image","version":"0.0.0-d127cfe469e41c1f8658e57d2638db4c452a90d3","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.40","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.0","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d127cfe469e41c1f8658e57d2638db4c452a90d3","_id":"react-image@0.0.0-d127cfe469e41c1f8658e57d2638db4c452a90d3","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-lMm66Wcog2gipJh/yuGVZMBakW/cC/Qo8E2VX4suIkkTnE/Jfu7VBvnpXIkND39Hl45Pr5YWzgQo5kp4ei9w/g==","shasum":"9b8affaa2ec4cc7017c6f20f6237c6de1a2120e1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d127cfe469e41c1f8658e57d2638db4c452a90d3.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLTLnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+nQ//fiufCFr0ZLsu6xQZ4CBOSKvJN72osW64ek2+itFaBmSMhE2c\r\nV6qoW26H0gduoN2wvZv70IyjrA6yTtgM5HiaGNYbD8jS4/l4hTjec63HDVAh\r\nYV3Kr81RaKg5R8Dzz+wRJIqURvjSxLR8q/l4+xSQq3nNfm3Ia9GG1VtQvv9H\r\nDCbN/khaqok61qNCNUJ+FsiU/MvKXaufeIBPwyhCoQAGqw9dNmyCKfwCa1rb\r\n9ZEVLEAVNEWLHzOCnrs4odlpXS8CI5chWdJIMaiZcueHJT0BXaEsTibVYUSc\r\nBl32oEkPcCMYtqc6rfTLeC+uAPBHQu7Czi166VHdJMOLmTrOaJ9A3vetYlW8\r\n5fIPhPL2VSA/zdIjc/LOVH7zoq/Rs3nIAcN3pjP5yZOFx5LzRQTld5bx+C2V\r\n9u2awLPX6jbR96G5fstemxTHcPWNE6y2bvVKxqehaUZJzH0oC2bVEfN+rZUK\r\nR6r2EKk1x3FkWawrh9mS+JpzAnB6+lx20j+MwfWwMm2REQkMBkX2HC3LNp8P\r\nNcl3Mo0lfM9uaKAwQCxqXBW8ln8wsCgE0KHbDsFbNvX728Rsq+MUxwO4sNZt\r\nxUwdBZXd+HpeTVmqkNwT1nHHDSrpRSuHLA1oyE9HI6QRunkrnvBLo/1K+XjN\r\n0cV/cZxpyUVosfU4VqeN0r/Ftr72TmXM1tA=\r\n=1nrZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCog7CMA7u8lfb31yrNEmdHp9tuD+AO13QD3Z80fC7GDQIgPux0QY/CVy6QInEQATCCjZNf53kT7Xgb46OSmefH3Sg="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d127cfe469e41c1f8658e57d2638db4c452a90d3_1647129319403_0.9572128262287649"},"_hasShrinkwrap":false},"0.0.0-9337d6db414571b656743f5d30a5464e15871070":{"name":"react-image","version":"0.0.0-9337d6db414571b656743f5d30a5464e15871070","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.2","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.40","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9337d6db414571b656743f5d30a5464e15871070","_id":"react-image@0.0.0-9337d6db414571b656743f5d30a5464e15871070","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-M6sv1k1t7nmAmaBIcJ3Q5i52TZEoOkYzfkRVjq6ty+GzKSuJjOSXSWhPgMZPZ/NUxbAk1sQopLtyNGGluRGkTg==","shasum":"e0ceb8c4fd4a2869c8e778c4661501323ac3255e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9337d6db414571b656743f5d30a5464e15871070.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMMl7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzihAAnTxTdg9bAxdQvDztCwG4fhZoCof1ng7f7qa9/tfgh0VpI3TO\r\nuw4YLjwzxlATRq3i0A9fsSHCXCdru5ohbOpEYlDOxHC1wVnza9khL0Q/3Wud\r\n/bvHLCZjIjNOtkfTETDWlXNVd6QJRMDrUJWGthWEh4/dykUSmZAVpJ4Kcj57\r\n4WGlQMX+xnRqCLuNb/pPuSggyN2rpRb3jNZutsWB1bCVd0BkNL3btOxGzXmd\r\nS+ygRVDtQnkN+WnaxrsuWEJSYwI7eaUHmtN/++SacDIUCpozTiNvgLJo9uXr\r\n0Yad5kf3E6qFg8QF6ql1YZYDrXTrjuGe3rVUK+1eTsNvYb9J8Nac8KX/96AR\r\nJf/YxGtw01SPWXfSsQHuz9x/pBre2QGASV3jRQw/kK68ZX2VCgOHUpEOmkYg\r\nyeQkuwDUf8LQv4m9ARE6Cgw6MvQzCwDJ2qoUA9HI6bayB7qawFFrCjtAq02s\r\nxYuBpMu1aD0EJO86CvVQ1vrlHcG4XQQa/dC3BO1pnsjupSJXzX0BDEHkRe/J\r\nG90TBaLG1ybRXPMFfFCeevCtFTxhbXRG9haWbQbJlISSdiS/qOh85Nfj9135\r\nGehEoScQRz1ynCDoGf6ey7tJpw1+fbja3ucnEryk2cf8+B7z7jjcCktBtD8S\r\ntgVPSPhsTXCv80QCnA8KriClexnRQv76yNo=\r\n=fOui\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1DdeoZqwFqaUZo0Yzqjz6jYGKZgYRdLiho424OXULXQIhAMOny/14Gk2uzAC79pcDQbruhFzvZNw2i6XL/JR1e+dH"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9337d6db414571b656743f5d30a5464e15871070_1647364474692_0.8323043252873203"},"_hasShrinkwrap":false},"0.0.0-308ea8f3d77c70162cbb261619497d8ebc5d16ed":{"name":"react-image","version":"0.0.0-308ea8f3d77c70162cbb261619497d8ebc5d16ed","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.7","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.40","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.5.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"308ea8f3d77c70162cbb261619497d8ebc5d16ed","_id":"react-image@0.0.0-308ea8f3d77c70162cbb261619497d8ebc5d16ed","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-/2rxyr2o8gXUkHjGdSvdtqpHKH0XOFCteG1O3BI3NSnMQGSrOkcJo0iPAdDw7YjrCRtC7eRIujLAmvOD31Dj5g==","shasum":"9df67ee52fab6b0403bc149f0c3e6b6908f1e7a9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-308ea8f3d77c70162cbb261619497d8ebc5d16ed.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMljcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJeg/+JDeEW0/R/PiRP2YVutisnQJqbv9j+/nE/Lracvkc8lfSt2k+\r\nNY3Fl/YQZMjSYcRPSAHK0psbhkCVnZFE2Pu78gxHPpWx9KfntB1UCDuXSfgF\r\nUHeEJpOt6s7Yn59AokcRir6UOL2ExOFgt9Mk0R8dyAsAVb4gp8FuqMlrcg9P\r\nEBt7q67HpmpD2KppFgi9Ztkmo4BeahXvc9BCTm2tNv4sBvIaC4iHLj93HRGp\r\ngH1q/Iwot+vMaIG16xomeZSOANcz9ABHdx8yPMY3ZHIqQ5DH3yN4umeHFYSD\r\no31LUucc2kmSQLa5MOfg6NSlQpdnVhD8oiW6mumGtxwdPOfW6/elZNnIwtS2\r\nxH/IVTXqg/Uj1Hc1Q+LLsSjtkagl0r83yC2NviD1q2Q+H/LFdoJ8mzl0cSy2\r\n4NIbyOWMB0Mp3UFAHfl99HVnSsix7LOj3fRnGIzKh9Wc3GFXA2JO9KFtWx0G\r\nP1OBXVZ/uXkLrLYuz3zhbeXkDR1e7Euj5v+GmjZfCweFXWEDte9U+21gmSFM\r\nivguTxnNgABr5tq0lbM3FhjUVX5QpHgMMqZ8WnGLrvlSwi9NSt2TRFYvxz0m\r\n0GBYBS9GX/07ICRlVbdB5o0NYLfeB1NXaKHhOwnNP8NjTGIq4zdHo8Am+Y6m\r\nae4vHUyPyaFy1xhIa+k/J0c/kboHAIaPmm0=\r\n=/E28\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVC+1i76F53W8dSTrkl8IkLhSAoDIWKSKUqioy+SaeDAiBG7MIT/FkS1OQ9x16GUnj0sTQ5M6tS3dWtvLOOHR4IJQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-308ea8f3d77c70162cbb261619497d8ebc5d16ed_1647466716406_0.3995792148526829"},"_hasShrinkwrap":false},"0.0.0-b8baed6bdf311a7233c0edbcd16c6088602fcd3c":{"name":"react-image","version":"0.0.0-b8baed6bdf311a7233c0edbcd16c6088602fcd3c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.7","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.40","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.0.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b8baed6bdf311a7233c0edbcd16c6088602fcd3c","_id":"react-image@0.0.0-b8baed6bdf311a7233c0edbcd16c6088602fcd3c","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-95Q25+rPdDr7VnQFlXXYAx5exgYrCbSJxOQchsuhaGrQXnQJ190avsQh+LLdmDBxK2aulseDjjthanrjSM0Haw==","shasum":"4cca454c5d865b2a65ae26633f080dd0175dff9a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b8baed6bdf311a7233c0edbcd16c6088602fcd3c.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM9djACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0hg//em9clZ11C6njfIbejnAkl2Va0xzZYkesPxCs4EyzDwxbx5GC\r\nZjQMI5/yimmEb6FcDaNttzq/iF34IA58OweJuPztj+VE/9/lSDMSMNJtWKbS\r\n7RoX2nQrpsYdjT0gDRn/VKoQ57rMQWcAulksHxj0X3QSxVdc6vbP2LF99pZx\r\npztKCZ30RL+FzzTDIPPhIJLrUa5fXadTjMrMSplVZxhPugrlFk7m6yWlVhVf\r\nfDmrXOVFU9W/Fj/77cH/DF5AGKFeRUf6KJN5ZtH5LX+ijQ6UM3i3UUQbVU/8\r\n54/lyRtLT2V5jpjIUePaaw1hrAw9+4/N3jffCHpJSNVzyuImV9vA2bPAfxEP\r\n5oLobWkLjScQGi9C9nPQEEv4BPZ6q+fbuyoXZHa0YtDWaJqM4lyV9CzV4Tdp\r\nnsa8GGgjcXJtrWcO6OZksb9s7AflDR3ehLUis4Fs93K1H1KDkBLkxzvbqiG0\r\nOzBE+hUKShRLhhvHWvtDCqhq/JgnOs6sF1itV+DGxfIMfz9IjHoA4vTU6OFZ\r\nUpJsyAsYlvnjTNFjUfURzUJVcGnVx1rAyWgq7WuJPrqs81nWtxndo0pc0Q2t\r\nsN6aF+TpSfp+3GdxqZXW3n1qBQ+/vl8rWHBQ32PeyzTqctNkA/BRVghVaekx\r\nmyi7DKwOVcoNpjQV4HD4VleftS64MfJnfpo=\r\n=e0rg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbVaySrahVrPiPtZOkwG0lwPpIuP9oLKYvsdTz7rCdKAIhAKtGkYqrHJbzNDjCZFavZtPjeTNE7/+OASi7g8Q+4Lox"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b8baed6bdf311a7233c0edbcd16c6088602fcd3c_1647564643405_0.25685433201826346"},"_hasShrinkwrap":false},"0.0.0-1bddf2f5b717138faaefa9665ff5408e34469590":{"name":"react-image","version":"0.0.0-1bddf2f5b717138faaefa9665ff5408e34469590","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.7","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.7","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.40","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1bddf2f5b717138faaefa9665ff5408e34469590","_id":"react-image@0.0.0-1bddf2f5b717138faaefa9665ff5408e34469590","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-nsg2ALbUwGaVqu3B5fzenEEkGiWUzv+azH+X9EQfoYBEoLYpYaafxWnTCfesGfwKVrVf3zj9DPB+PKnw9c0JZw==","shasum":"be13f51b726994b93e4a23559d0599fb227c2e60","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1bddf2f5b717138faaefa9665ff5408e34469590.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNeY4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoLA//RvYVIwRf8O/1ujHwMqmD3KNC6cvZsrEcf2Xy8gdT5k0061qc\r\n3Hrk43Nt/23oKjkQdzsjle+l4Ly3Oax53IKsKp9FEsE9AHdp7aiooxLsiZ5w\r\n2f+jr2kWzp010wltq+CDUq1bI5GOMWVMUlnREwKyxgMbOz8696ITiFc4Pq7m\r\nkFmV9NiR0Dt/P1PjrXiiUaFF/lI17r4Fs6Rsk5GooUByl+mQA1xX9yLaKNzg\r\nGB8kAGpaGj6Y2HX5ElIsctGIXDPXpKJe5ivzZx5ICHOwEP5o/O9J6pZjZ4Z5\r\nEGfrhFQrMj2YHuGJOTmpcK0C87G9FzKfKdiUw5ZQLFo5LkRMSCjioM0x4+ZV\r\ndSIoieEAKTQmFS3eUh4WdyoAkGF7dcUYnUGtXaMnm33B79J/Gj6076cvfAg2\r\nDBsk6KXEd/6JRK+H1Ofe5Z3qP6qe1tiakjpYy5iGx/+m1Z10ZBzW8Wo5M6V2\r\nHQKRz7yV1iamSey2zoE8S9xxXs64l9oqSzF4NumY3RsnVZ+L3rbEIEh2vV1z\r\nfkz3CW6KL8gCOItdfEc/SJRRjl9qhK3NwBRweodCHHK2s6Hyw3EWINKFVsWz\r\noPonspVorxaYiMZNv9YiJnqw16Chg5ba1UWzA7zsx0swv6SXBW9A4OhMByDK\r\nJWZrd6fql1SJVSyulOdIWeL5TjNgQzopQpU=\r\n=StjV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYSoYuHIbM55TfhfeuCb/VbBzOsQ7b9t6/6EmLZASvrAIhAL6h5LOBxDdOjK0y4aZXqoBm5f03RoxrLrS6+oIGSevT"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1bddf2f5b717138faaefa9665ff5408e34469590_1647699512530_0.7571767577067183"},"_hasShrinkwrap":false},"0.0.0-e5b76f9ab2cf1625ae4ab37c0b7167f512a38ece":{"name":"react-image","version":"0.0.0-e5b76f9ab2cf1625ae4ab37c0b7167f512a38ece","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.40","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e5b76f9ab2cf1625ae4ab37c0b7167f512a38ece","_id":"react-image@0.0.0-e5b76f9ab2cf1625ae4ab37c0b7167f512a38ece","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-kVH4bH5BRQA+6zDHY2euAortdBh7k64Z0bWwbxWLJz/YMjkPNjzDP5tPMfLAxg1OknB3Bb+jLSQRtTwx3Q4dAQ==","shasum":"07b5737c2c5adaf17c13fb3accca8c575d18c242","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e5b76f9ab2cf1625ae4ab37c0b7167f512a38ece.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiN3DRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjhQ//UWTQ+HXi5uY1gaKHAGQvwNRJkCSp2+JeDehNrUsFTkCYz7d8\r\nCAjaI57ofmfXsP8meTXVX0Qo5sRtUgxgG5dQVm5BvX4+kfzh9GZbKKJ0FRXL\r\nDqOVai0BN0W+78gYywqGitJL0b+skxcCIVSgi1jiOZmCVywfYKH7Bp3mHSc5\r\n66P3uhozLlmWWsfOGIdyOvxowyc5MhBT0QPdX/T5YeWG+hxkTBGN4H3EkxIJ\r\n9dZUXPSyoEJF6uIeI5Y9rRe2ctXkS7HiSbWPoCvYEh/8AlzZ69Je2vslNDpH\r\njLbFDrlz0l5RcFXSHouwF3uClJm2WAOIr8JJ9h924A5wrvP70T1+kgYrKekw\r\npTdgM4mvqcQK7kEWZxEApCjB6CBkxVdyytyq7h68rfObc2GPIxC1EDSeCimt\r\nNL/4wavSivPv0I3MmpyLvAB+VJlZNnTdSXbWvbHmINI8VcQ9g/PboJpUefeA\r\nS0RPzJazQzwuo/QSDaySnTKz9paSDGYFETkVPcDAqUNk4rpaMlAvTB7VSQtE\r\nc7vm6WW/fImYKpAljX0DTNmfhCf2tuWCoXgUiNb4LoEYHNxKfHukERQKTJFM\r\nOOo9sJA4DO826cb62QAXzuvUi7i71O+vRvLovhZhEnlcQ5n0lUX5xTRGmW3t\r\nFjojhs08itAAgi72vq/V8hKEoO35RFO0L7Q=\r\n=SVWH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBiVNple0VmmAXoU7uoByD29DFkjxhkPU2MXKxnoaWggIgUQbBXDhHvWUHN3jHIP46mKRcnknRzK40PlEvocZUNz4="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e5b76f9ab2cf1625ae4ab37c0b7167f512a38ece_1647800528969_0.17217180863488468"},"_hasShrinkwrap":false},"0.0.0-5701c4ebde7d4fbed74a2f9608699fcb22e3ab5d":{"name":"react-image","version":"0.0.0-5701c4ebde7d4fbed74a2f9608699fcb22e3ab5d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.41","@types/react-dom":"17.0.13","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5701c4ebde7d4fbed74a2f9608699fcb22e3ab5d","_id":"react-image@0.0.0-5701c4ebde7d4fbed74a2f9608699fcb22e3ab5d","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-D3wQXCwzgL/+ZjzwTIhA3/Aoo0jspAoXtddLvcXo5UQ9KrgSsWeF8U2rkmWL/wo0s41xvhkAgKxLmnxB6yEaBg==","shasum":"c401de4aab35b46058c71a76785d03d2ad5d2dbb","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5701c4ebde7d4fbed74a2f9608699fcb22e3ab5d.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiN3EYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvVg/7BDTrOKY9Xl/fiUWWq3OSkg+zcdTOZIxe5knudQH6p8WhXNob\r\nq+nclWAX6bRmLOzs3fjguD1tta8TVkB5rCx5N1GScbA6HPHjvHKMjOGUGofG\r\nnZ6f/kMFsmEgIGb81ca+MXLu3Vva9Fe3GdfGMMRIexBeaeY3+cTSvbv3qHtx\r\nZ8r1fMmevKN6VuxPLa69GIylv+pRIIKG6qi1pgDn2cdUT0EyCvDFVEPIbd5p\r\nHw3GIH1Ph8S+t1mf4Uv1JlG788ttyWhkuLUHSLkfWy9ch7eBZpCh5ejj1+Zj\r\nmpFf1LczPCxS7V1tUJHnz0MegLfSXOwjgyYat0Qz6QStoetYVbbALxcUynRL\r\njb0XMlBZmtSOb9j9Aosz2spn78KmW0dla8ZYSY6lBU72yp/aWesdPwNCB2kQ\r\nw7fR9nJP4ZaEhHwCehoNpRof7jzLHq8N7AaeXnHU1dDAlQSv4vCgqrmgbL69\r\nn+tboQyJOc14dTAm5hbVrvrq9HPb3FCInW4rkpmLDqzdyV2DQllGbdTcWlkE\r\n8lUYNBa1vFIcCeucZZragHYOA6d3alOSlhCBrN/z5k/xRbG2YgNH3QLXOX7S\r\nLpp1YPFCpiNVTRww1v+PiQdq1c445YBeGLNC0t3QYjnZH222AR2A6lC2sasX\r\n7UvQPxm3SeSgeUIp/727WdkFbkd6ycKdaT8=\r\n=7jI6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDd7jzJjhS20CNDbudvLGF4t2Bts+x8UZCL15gHaduEuAiEAvkAMcZBdwRYCguS+EsT4sWFSXH0gtQ3qktjf5mrc5Ks="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5701c4ebde7d4fbed74a2f9608699fcb22e3ab5d_1647800600067_0.9960382378343535"},"_hasShrinkwrap":false},"0.0.0-5c0b2e1c2b50a8d1a44f8f0992f246e00f5ccfb6":{"name":"react-image","version":"0.0.0-5c0b2e1c2b50a8d1a44f8f0992f246e00f5ccfb6","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.41","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.3","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5c0b2e1c2b50a8d1a44f8f0992f246e00f5ccfb6","_id":"react-image@0.0.0-5c0b2e1c2b50a8d1a44f8f0992f246e00f5ccfb6","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-vKBkkQU8O/nngjbEyU3LxXc74K2h1kHyW7M7LbUfjaQJJZkjfsiw4GC+3Ci0TMPJQR0codhUDJeu5OnamG58Qg==","shasum":"1ddd15532701b1c36bd78df95f9c420ae9f823b0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5c0b2e1c2b50a8d1a44f8f0992f246e00f5ccfb6.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOPZPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMtw/9HUy/0HLu1vA+4Ls7CTa8dF2oaD7HuGBB2ErGeaEmH6SsStUV\r\n8AVpyOq2jP+1zYXvfUSN6QdPIUhzTLdL3F/D9TXQvBbBff+15D8y5JdqXCGD\r\nNJDCdIDIpIFcCIsk051IMKG186xoo+c6j5WtaXANHr2lRNh+SDof9rynmxub\r\nvzdBcWKmgesjV1GF6hSm+PiOGP7xGxYG335+Q0X6Ze3hESAweXMvmx3FJMfD\r\ntnWI++EKGEVxDUku6dEglrRq8XCx7695a3V8gl4h9S9tAWavLZZa/QV8JZog\r\nXSb7q7++S3J1q2ChEZBlKDUo4wyAmUlC0Dt+s2xhDjg3oPWCXiAlbXzFknzy\r\njPpClzU+NIxVkCM/FSv3pYPyD5G/6u/1zrH87XclLgdNyHGWFkBlKWof+xfD\r\n+JRAKTkb79Dyxdx2ebwBIpsJjxReRcd4sG148Szlr2LQ0kvcc6swFA1vNUxi\r\nKnkxvPoZuQfGK3BuR2hNCdC30Gw/Y4GGCzrrORIFZKuOjuw31PRmM7vcvzjc\r\n6j/Fd1bp+QD+PP3uc8BuzlfsHEm6QHvx6LTkNdQ9qd0HGM+hwP7noQI2tgO2\r\nqyh3TfW7w7w+qe9705tDNs7tkeUjnjTP9V9i26YSTCdAHu++mN39XKQGK1iu\r\nWK1YSI2IsYF5HnMnCqZusF/Et0nbaGXCqzU=\r\n=psBO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz67286LTnnjF3FvaVpzVb7hirumG2GEm4L0GzRAGZuAIgItikAirvUPlZ3DYOCOSkppOgACoH7Xflq5MKzOn0g9o="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5c0b2e1c2b50a8d1a44f8f0992f246e00f5ccfb6_1647900239550_0.2113543735321486"},"_hasShrinkwrap":false},"0.0.0-e40dbed62398f7f40224dd7d81eac26cdfcf8089":{"name":"react-image","version":"0.0.0-e40dbed62398f7f40224dd7d81eac26cdfcf8089","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.41","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.3","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e40dbed62398f7f40224dd7d81eac26cdfcf8089","_id":"react-image@0.0.0-e40dbed62398f7f40224dd7d81eac26cdfcf8089","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-qXFLYw1DSGBoSTrcoveK0dV6zjYFQZfW1cYwutp/4zxT6+xq7b3kf/HUtsa4WlFI57c2K27HVmJBe6g+jXEu2w==","shasum":"2693bf3b67dd3cda2b25e3d5b51615a392914bf1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e40dbed62398f7f40224dd7d81eac26cdfcf8089.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO6ArACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQpw//atxPw2jIgCmYY7nn/TNb2dP5QinFl9wCwOLrMRmESLrlLXfi\r\ntF2ID63rW1mAPGs0DgIcbfADON8kBpe8GkXjibhcc3Qir+rQFGNln/FtIYES\r\n31D7k+jSUkAhr9kbLmEACs+t20ceP/NPtmLAO3pRG+mHwjnQdyEhDjZxj4yr\r\noAxXrf/10SxlW5Qv6kmS1m7EMGz2xpclmLy64pcE4NbY3wzYJT6lG7NCDRT7\r\niT5vtXHMCmteW106m0nj3564y0CfSoQolrHS9zUyn8/KsD9XLbul81FwI0t2\r\nH2y3wCh2qerkjLOjmNT+S0BP25CckqKYCtL/+6pnum8Hwg+vYD7+XQHgey0n\r\nzc1hCMsU+Un7pBdVYkLgjW9hzaz03jmTwzLnHAfCFhQkPit6xew7OlzXMgHN\r\nQWD3iQB2TYt3dXJsA0TXbXAxPCcSImJncuY8ibGugOsHr1V+3WMuZbS7JctR\r\nwwa1PJueRJiPCrNurn2slk17vbt8mAxQRUK2PU4vFg6PxkU/+Ba/jZBzL1rR\r\nGR8NHyxksJ3c0vFZlkvxh4aF8FsT+cNzFPNgqD9HAgVfB/U517QAj+skT6sq\r\njYEc4GKfhPXEQxTV7e/cd2K948CloT/gy98DK1Po4fya7JFjBjVWHK/4GYH0\r\nIHpdA4/VclQcfYE6nxah+zRxg+yd4C3Fmz0=\r\n=sHwt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFY3aMDcL2tUgKTFmpdWE+XcVS4NkGBcuYy6sDrT0d87AiEAhsCodxWGi7AzQ8wO+vx0dzBcOLogCDLgB1YMHOEACdM="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e40dbed62398f7f40224dd7d81eac26cdfcf8089_1648074795687_0.27123442029638145"},"_hasShrinkwrap":false},"0.0.0-a1d4b4c139b40f35516b96187b6767561ae8fd4c":{"name":"react-image","version":"0.0.0-a1d4b4c139b40f35516b96187b6767561ae8fd4c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.41","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a1d4b4c139b40f35516b96187b6767561ae8fd4c","_id":"react-image@0.0.0-a1d4b4c139b40f35516b96187b6767561ae8fd4c","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-sl3Xss699DQMrh6WLaahX4Q3ZA546q02u4JztTvDXxz7ifstghpDrbvT8tOWGzDFzKj+1I4iof4ImIz2W8ODSA==","shasum":"af96a6314cbb4498e16fd7fe9cc4cf6fcf451f0c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a1d4b4c139b40f35516b96187b6767561ae8fd4c.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPnt6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEsw//cnTlBwODUQR0aL7QoDjkZ+2KRObRm8vYyxAvk+Iaz0tjRfU8\r\nqMCZuDmTH0gGqZIk8YLnXcoJXyu+9DUeaa15EAFzj567JamnQgpoI9xpqk8t\r\n2rCto1lxjWufmZpsdWlHS/wR5UjIdxtAzoPmACTyhdT3LTz/AeA1/DPmksaX\r\nR49xSELF7U9EEB4hm/de2A4PbDGu2yJbBEA3ASwlsbzH5VV3wtcZvKUsER/F\r\n1xNrZn2WyafmPHuVBoYDIHkpT5ily6kkSwyPXU0zZYoHLm/bvXRarHE0vRcK\r\nFkud7zws2keZU1DyM0zAOS4IdRlUgKhKNjRbDXs+Ad/pVV+snYA8n3u68htE\r\nuKs4nPigDzLjyTyIdjrVPC20dodQsY5ycUEuzx1yBWhdIDEc7XJ16tHgS/wf\r\nzG8wOEf30OlupzugV4aP4g+a7D+Uq7qSyJYGL5ef7o2TBIRhv9wZk2bHAMrD\r\nt8Iz5goAXewW3w5KAwKFosPBlvDGg73FcQRCsZR0lVGp8Uce6kob0I7Rq3q+\r\nYv3x24bJERrQaUtV2P743YJl50G2smZfvOr/MpFeHMDcrDfpcqzR6vRJYBzO\r\nIXS1uJAS4kpfY4QCIKknu1xBDa21R41Qlntv4Vd2EhU1H324sgsyZy44iTZc\r\niIG21Y8OtB+cWiuBW6zEvMVKDd55TP6UarM=\r\n=1hlr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNCdRsJDt5FshydyRcbsNGP5mQMd74Ay1ToYYFGYkKdQIhAI/3T+ZSq33S+0mYs5DmhCBDnmDsEe/8RkzU7+guI9l8"}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a1d4b4c139b40f35516b96187b6767561ae8fd4c_1648262009909_0.6848375383920287"},"_hasShrinkwrap":false},"0.0.0-f6772a24403f71a17f1a735bbcfbcc089c036510":{"name":"react-image","version":"0.0.0-f6772a24403f71a17f1a735bbcfbcc089c036510","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.0","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f6772a24403f71a17f1a735bbcfbcc089c036510","_id":"react-image@0.0.0-f6772a24403f71a17f1a735bbcfbcc089c036510","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-Nz6mglduM4jj0Cx0Vv+ULYQY0CKIDbw6DBp4zuro5TDOSYTVEHgW7YB3hK0CWoWvc4+6CbHQ+xkBTUHrLKf8kw==","shasum":"e644e320b31f1c28e6aecb86d025a833e562e184","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f6772a24403f71a17f1a735bbcfbcc089c036510.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPnwOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcmg/+Lz4G/OYLD/HiIfvqbcz4/Py3iMOPfGiqbUu9uSIRLHQ/DLY8\r\nayQTHNHn7npAps1WmLrK/MqjXQcoKD4SDBHwIn3zeYXvP5Siozc82mNEVrYV\r\nyJvJVdHgIk8h7vSnV+hAErrWk7hrO/xPqBwGeDHnT4jyN2bOSDuYULjbigqD\r\nkcoOLnpGxIyEbW2cvnjv1xTizReTyceg1z/zV7o7ZJkeW8U5rB0I2K1H+dWy\r\n2/PPu9SFCCbN8DItSVkO7RwcvLhCd+MgrM0wlYxourFs1CKGWFev01U49fKx\r\nA+uVRUd5pmmSMHoD9QHzBVO6jad9r+WxJ2FsANUnCRoQE1IqRhgGn4Rnq/iC\r\nGq9INwxIz0hiYf8rR4sS9n7ACsSfJuEGr37rUA9TPE3OGfyZ7w3YBwdCkJAV\r\n19NWH7dclqnnnOzyKh0EF3+4L6w+Yfn11Yaks6JrVWGdY5huJ+bcXGmOb6DV\r\nVAwYgaWtue3/63ZW7lunHybtUsDVy+6fBwlIQTdjNoIL4oAd6HtUQvjFYBAP\r\nlWnH62cqqa0wFEOCGP8lnSwSMN0g176rfZRVqSYrcP+F//9Ozv3Vc16GpRRu\r\nTCvOlx58MAE5WoYQ4UEnDuq39jSSEpNYOF6Cmw7LiiPCkS3+R8k6+31cjU44\r\nPlvdsKJdeKclCoQKnJeDDF8hf/TNRJ1sys4=\r\n=22W2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRgAlvPUZ+6r/7CdyVfjqp/zUkWW0/S6Dp8PDigIVY6AiAaNd4VcurjIUGZ8QlMHYfrG3Lphq3nGYBsByTPuGGSZQ=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f6772a24403f71a17f1a735bbcfbcc089c036510_1648262158457_0.7515557339805825"},"_hasShrinkwrap":false},"0.0.0-e033a4748a7069b3ed01b71a0f393b8fb2133f64":{"name":"react-image","version":"0.0.0-e033a4748a7069b3ed01b71a0f393b8fb2133f64","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.2","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e033a4748a7069b3ed01b71a0f393b8fb2133f64","_id":"react-image@0.0.0-e033a4748a7069b3ed01b71a0f393b8fb2133f64","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-3368PuUFRhClJ3QNviFpysmcSSMsOIi3AAl9QCWGM0xo39nrt4fipWaVFAgCnUwVJFSa6XBlbsLFKcgw3BihHw==","shasum":"eace68a0093a3eeceef637f5c7c1f369a69c605b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e033a4748a7069b3ed01b71a0f393b8fb2133f64.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQEN6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0kA//RVOfVZiuVo1N8B8nM9XqjKs6SwkyRdNdFeFIxnFBlpSNGqKY\r\n2w6rjq9+jC66+esgT5J587fJxHZfQMP/N1+fh6J3mb12adSfPhPPuilZ/oWM\r\nzrsCUfQRZWtSZuMxW1y6JQ98J0N40yqaLXE16/F46KReiUciGgd1nVMX7cPW\r\nC4LZx0/Miyp6UkShbFc8xKNw99c2ucHubOeXSJ1EANdqBOKRDZtxVkByGqlp\r\n2gaAG/qZm3GrZ+xEfr5c3AoySTOJydDv1eCUbUDhU5TyXBBRcvZ31x80fRF4\r\nFc8dGpQNeTMBJUMzIFt+rX2l7MON9bFS7nso/YGNe8VKZkvbSrqW9TCPp7No\r\nvH7pXngaPeaE3tNu519gal5PFJv6ynM2qSVjhkoapQHuwib+VXbMR1Cd5SK2\r\nNXggR+/b8KPAEyagjAjj4yA0WCtTZl54VcEeO0rJM2ZWSPPXHAInWOj2gKMH\r\n5Wt16DbBb2OFnw85jCJuEdBzTGKw11TRvBDx3e2uFKUhHg2DsaVqrNZCRWK/\r\nwyLJZ4MVxvp5/P5tbFXbHJOHX13f16IK2NvOLp8WCMakxoYJlX/mjIOgUe9b\r\nw49eTiRi6I4UAjPPAn6f6AZRgVUtFRgl9aZ+azKrlkwOcRrlCD6YIhg4pHy8\r\nsUSKAYalo+Hulo3uqc0q45beAH1zapaJ6I8=\r\n=3M7h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDb5S6nikfYWq5E//fljy77QUAplj+d2MhBecJjwADxUAIgbkk911c4PAhgu7yXZRjD8vAFTYQZiWBTnAmxEnAEZ9g="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e033a4748a7069b3ed01b71a0f393b8fb2133f64_1648378745975_0.966340228507772"},"_hasShrinkwrap":false},"0.0.0-6854d5693516587ec4806792cf1dfa8d01287af0":{"name":"react-image","version":"0.0.0-6854d5693516587ec4806792cf1dfa8d01287af0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.14.2","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6854d5693516587ec4806792cf1dfa8d01287af0","_id":"react-image@0.0.0-6854d5693516587ec4806792cf1dfa8d01287af0","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-JBKT5AKlmMNB/AzKin5Cy7jQoF7z5Iiia/akeNT3scciP2gZODViny8469dr4UfBpCD+A42eteBAD9ipqCTsoA==","shasum":"bb0703bb1b1965bca38f59165a205dbb54edf479","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6854d5693516587ec4806792cf1dfa8d01287af0.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQEPXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMGQ/+KCWYW4FN2XhjZegq/zvBWYFLBNEP7brK2tHXH0zXl2dFh4ig\r\nPTRiS4JLAHdnUHny2wesl7lE9SVwI5FyOBEE+luYYFgLJApKordu0uaSCWG1\r\nbieWQOjlCTLeRVUBB9acCqEEnnCF7VAubkvNDxJHiH1d78ujYTqbb6fFDj5p\r\no9wbJRKbmwN5c2Ft0ECGDZksXLQ3ShgHBHYMgpqxST19DrG4panD9m0vTxKy\r\n0MOjju/+OprLPxXVpTGbSs1nvHZooSVxN/U5tjZ2NHVjO2HrJHppSop9G0Yo\r\nYz93T4bBbXR9t28//IDwcNRFM7SwXW9g9/zeSiKCCesRV13a/OjgvVL4SVUo\r\nGF9RiJ/KBzYuhWeYrsPgMtc4vwPowcM+UmCAnkTCJh1TG/W18IsxpyoUZpdm\r\nhbTUpQ6dgNzIeiY0U0JGQP059y5GYluO0Wf+Sg8kbctLE3yh1T/qPb1XyF4X\r\nRc5ckvur6I5IvmLu9sLbdhw5jzRIW3FSTCGe4Kuzbmt31RUjqjzMtObyXmlo\r\nGVxfjnL1ZbY9OsMObeHbVuDBtIZ2A3LG8fezSDhE3nIDSinbLh0T+fY7Ywjh\r\nW51gOE2wriTADkPRKYCqKgmr1JQiIdHeXnaUpazmbiaZXqoJL+npzn4euNFW\r\nDBCxkWMTX4sMrYznmHYRj7afC7jwsUaMNlo=\r\n=oSvZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyaEXJnXXB9bciM5qs1P59BPJShQA4oqnP8JR9pMkoqAIgexdrpdxAbtEOY2z6m6FStrh7BaeJeUp4dYYFIoRH+84="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6854d5693516587ec4806792cf1dfa8d01287af0_1648378839723_0.5820433757891066"},"_hasShrinkwrap":false},"0.0.0-5d14ccbf8dec4776cb0420742b36d71f765b18d2":{"name":"react-image","version":"0.0.0-5d14ccbf8dec4776cb0420742b36d71f765b18d2","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.70.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"5d14ccbf8dec4776cb0420742b36d71f765b18d2","_id":"react-image@0.0.0-5d14ccbf8dec4776cb0420742b36d71f765b18d2","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-WLUke3LD6qBTtHCugCLAQXM4yHVx0dhf+fU8ljny7QoSXYFd21UKBOTlOhB+/4/obbHANcGliTUcEhIZCprKkQ==","shasum":"94d9f5d44ec75ac1c7ec617b18d8222ca58465a0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-5d14ccbf8dec4776cb0420742b36d71f765b18d2.tgz","fileCount":20,"unpackedSize":40443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQduBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZeRAAoSnQYRp3QAaPFGsDlIFUwagMbYizry0MoEiTCve/aL4TEVVd\r\nlMuV8+o4fT3Y4sukU8QakZk11MGlqNMu+WMu5l8kpjJVVATs0EB0cp12uxyt\r\n2UAHUI2imHjXfJUO/Ubcx8B5/b9GGIZ3jy/5pLdi8D5lpCnfJlf/Pnr+7dcd\r\nMVKR2UPtZRUj0AcgdCIDYsbGOf/QhMHhmdn+fo32FipiNhXysSI2P84CB0wC\r\nqyUa9Ih6XDRwDguhJ9s9LBq2QY8HTgp9UocIFWWiJ2gdeeSeW+UZRwYOCYL6\r\n9XjgtLfoaiKHoLu6hxpxhKvJdP01ixAdanRl4vR9PcAaTWmKFEEfNEXahb4W\r\nQdjF1rAEmxJuzbJamYF603MeolyFlWrYEH8QhdWytqiA2YxboNYAqMvltCPn\r\nLm9D+DqJS3rASPGohcDfzFlRImjdgdg3QL4hpp8RwHzkr2L6BnlQnmD6STBT\r\noOMGBSwPcPB7IDaDeZf0EuUB7OcY2wrx9ET30kcfS/bPJb3r7baM2616Fdxf\r\nIQ8fkL9OW3xmQRhYvh8Ws2/AkykikQ7Lw34Fn+98WLfSAISi+packkttQVo1\r\nAXpE/kkHedTU8jo9fRDsQGlmhuueT+GBYibn3fvqklw34y3izqSvDPFkMxX8\r\n+yN8E6tthIQFQC7GIJrV7Eu6orSk2Hbt96g=\r\n=f6Lk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5bpezc9ikC/HTDtDNjauXUBbYOQVipaiyt5dtaAILmAiAjXUMvuxIgV2suLzPbC2uVPAKcO0XpSH+Eij2ORLwtCA=="}]},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-5d14ccbf8dec4776cb0420742b36d71f765b18d2_1648483201108_0.5853681745039394"},"_hasShrinkwrap":false},"0.0.0-0675318c9ca741c71e6fb799d5d97d409fc60826":{"name":"react-image","version":"0.0.0-0675318c9ca741c71e6fb799d5d97d409fc60826","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.71.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0675318c9ca741c71e6fb799d5d97d409fc60826","_id":"react-image@0.0.0-0675318c9ca741c71e6fb799d5d97d409fc60826","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-mVD32zH5ZlUvFz4zteTp028vaEEM8WmkGOkx7zdb0OTKj3DsWEeWqK/+Wk3Z4s6UxMHpwVuyC8BvqLspvhODEA==","shasum":"8841db34feb8af0d7d7cb525233b80f6c95211b8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0675318c9ca741c71e6fb799d5d97d409fc60826.tgz","fileCount":20,"unpackedSize":40443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGg9vEQDtk3g1xm4U5parkaoA4HNGbc07kdIqKPDDA9bAiEApRCuJ444A5nT2Q3kU6Bq538v3jx0R8JxldobeQ4RPGE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSL8hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryhA/+OZYhxqaEJguzm/jKdhmuTDTfRMdl196T3NuByrT08tY8zIKM\r\nXZ1To297FC5BXsSBrCkO66/AIVHl7eCqKrRmzBfuOewys0knvDHQHFdD9LsM\r\nXxr+/Vt81Qrxz+rDgneVE/hXWspbpmLFDP2T/fHpJlLWKOmpYNlYxaDiu2lU\r\nIy4m/61I/q5/SBY8xV63CgyofP30tCuudQdKYeFsq1GgxvOsPCcY1w0IzvA8\r\nbSnYmNrmSwz23eI2PmSI6abd19CSE2be5IQj+N6LCKTLkAtplr0o5poH69r+\r\ncRUZFwemVYKDxQAR8mRhtwFJGGZ0hXavVrrjCF1m4nS3YizEHJv9CTDzkRYr\r\n72gatN88dmU6E9lRa/58iB0C4COdTGbOH6ahxC1qJVfjdjvSOlhEHGsO0dwi\r\nx6y39U31Sdt6apPxffRTPrSwrk7x5YPAMeVnpuGX4bI3oVd9iz1lZR8SXICm\r\nohAsPVLRmv2bcp2Ji4A0o7zohOK8dZTxqRtM8bRV1cLk38QIu0s5KjLd/Cja\r\nhYJseIG9sOpvKZ3STFKcLZKu3vDjs73R06pO34JD4Etm0YLQkdVp5fPTP65F\r\n8w58/+zI4UC4m3XxGj+kpzvBzwN/N71F6j8n80xB8EBX46IAqY7wvm4CAubM\r\nMmVSKJK++uH0P9fd7M14AkgQ0iOAR/IKWqI=\r\n=2bgf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0675318c9ca741c71e6fb799d5d97d409fc60826_1648934688943_0.8603615511793326"},"_hasShrinkwrap":false},"0.0.0-bc9c7fe966fe0bf57145094c93d65453f8606d06":{"name":"react-image","version":"0.0.0-bc9c7fe966fe0bf57145094c93d65453f8606d06","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.71.0","webpack-cli":"4.9.2","webpack-dev-server":"4.7.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"bc9c7fe966fe0bf57145094c93d65453f8606d06","_id":"react-image@0.0.0-bc9c7fe966fe0bf57145094c93d65453f8606d06","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-iR8MyYJZqvyx24fR5nmDf/ekjt2VY5BYKuHlu4m11BzKG8kBpL2TCU7pKgRTSd1uXgv8BeetnPbyDoHzD/phoA==","shasum":"17749ea870ac2c62f5c79088d34137f9c5acf4a6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-bc9c7fe966fe0bf57145094c93d65453f8606d06.tgz","fileCount":20,"unpackedSize":40443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl7o3rKWt4BI33U9EBoo/YGdOzKdtrgiAt9mNiUE54jQIhAMmFLn3/OM3OAH79JeooqrbVGiDzlQLPtOr7z3mKjZQl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSkc9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLAA/+IXU6/LMhVJIbNw9u2nsfaTQ+gqUGIUBOvWi44pq6VBSUjL+b\r\nECYNmq3XsGRaP7lfQtvD8L0l//iD8rmGRNZkAttdSmlchmlFlf3FHl3Xh1nb\r\nl2kKU7JMxbVF2/3GZ40OEwyL9jIx+2muHTun++sX0EtLfYm2miSuh0ZKaIZN\r\npqiJsdAimdjGQUaLeH92fld6JbLUw7h6wXJm8yrtQ24WLcEpXUzVib8o/Hld\r\nv3Rs0l6Otl+giazuKyfzUVQXHRt0qbC+wtbwUkhthZ1ix4apBqUukgCiXo2g\r\nuuIulqoN/v5Kui500XFp/UpjYt4yMgPL4pIZOMaxRNGZyEiGSPek14CmXXzp\r\n9uY54YcovyMEJ90x3+MOcGHaw0g87flM0su7C7BQjA0ryiTdGEKoD96uZZge\r\nl6Cml0ksqPyQdNdsZqo3f51D62k/CmYyCTtDqdgCxoM+Bmh8060DKbGDfI/M\r\nFJqNAxfb+ZOkWWN3oxSYlf98Teb3JZ+bEUJ/Gz4oYNzZxUno48valupsq/0C\r\nEvq2QzLKw/Imim7g38AZYtVo0GM8yLcSWq6XtNb/LOjOaUIr1v+weY/rtMgo\r\ngJg/yq5ruG6DNGudjojJ39pJqWAtSBt2PpsiM4UJDg4b2Y8nwDlbJ6l7dLWn\r\njv63yPIKRL1G51wX0JjfUQGcDheFUg/39Xo=\r\n=wAE2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-bc9c7fe966fe0bf57145094c93d65453f8606d06_1649035068797_0.5307006584556002"},"_hasShrinkwrap":false},"0.0.0-8c8792c889babb8d788b4ce99f669b4b253aa195":{"name":"react-image","version":"0.0.0-8c8792c889babb8d788b4ce99f669b4b253aa195","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.8","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.71.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8c8792c889babb8d788b4ce99f669b4b253aa195","_id":"react-image@0.0.0-8c8792c889babb8d788b4ce99f669b4b253aa195","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-XFlfaYx2mqbuN5Zz0Xkm5Tr1MmreC14hc2W6SgQABd4rRYl9jbsZWR/Z12voTjPWTeZvrX0bLPe1riyV1SRnZw==","shasum":"d66fb29d53ebee96812a3513985797f52f96ea3d","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8c8792c889babb8d788b4ce99f669b4b253aa195.tgz","fileCount":20,"unpackedSize":40443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICn0XEkhB+J5dNjXs8UouQSgnbJjYRyCHgDDXYsw4BmSAiEApLxvfYrMqXvrWlv/KTA6mtJfk71RwVgDvjttMomUEs0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTwYZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXPxAAhEu6ZXTuF9+rI+MhEd6n5ttShZUMfjdGNDN5/WyzpJbNvm59\r\nm18DqukoaWIde0bqsZMXvD4ddaYC7kNsfsF63uH3RJm+17rHQcydQiya5Zf8\r\n2mwAtJz1ds84I0QuEpIv9NxQXLasuJcbcykVQwoIFOuchOcoq9vkkd4AH2MG\r\nuOGkfwj4kRgODz0ejqfxG7Umv8pbvplVAYB+fhVYuL7WuYMmg/IdFHbcF4KG\r\nESG45wTnqXzg17+yp4u/TDC4z3S1yDC9Oiis7K1eanNUhvZQoROngBcitQ4c\r\nqFu8U8NqY+zAxKcYTiTXchgEhxHJ0i5FtRSVQjphX5vfjPnElE9Z3FeU+lLq\r\nH5QQW3FgpWPOu5NqK+96cm48PM0qQ84j8dww3g0iL3OeK/EwOKylXR6WvulK\r\n5NeIuvWl4rcsEK689c7ZGlHgNPhRnLN5YbTcxrllCByWFYG8byXXhQyWettP\r\nlNHXcnwKbKjEDIQmnOEaPvCqOB4fSspQR4H/C/eAdf0vo/DKEbHcWrwoe0h6\r\ns9LurnXoReWyb73NNqtStB9ePKclsD58vqAUUMIagzKdV5stw75B3XCSZemh\r\nuLTv16MC9r0g/+/DQIMbgrGDSMS/H8qzmyfGgBFv3V9+I2S4iVHELixZw/eE\r\n0nUGbsi3hHYLkcC7izbkeUBi73f7H2WIckE=\r\n=NLBX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8c8792c889babb8d788b4ce99f669b4b253aa195_1649346073297_0.6760522519455756"},"_hasShrinkwrap":false},"0.0.0-15ccb28b76f43fedf9885432ae9ef50c8b4cef89":{"name":"react-image","version":"0.0.0-15ccb28b76f43fedf9885432ae9ef50c8b4cef89","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.5","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.71.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"15ccb28b76f43fedf9885432ae9ef50c8b4cef89","_id":"react-image@0.0.0-15ccb28b76f43fedf9885432ae9ef50c8b4cef89","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-aPPAo+H2dBUgZkBjSjq8Btp7FQxdCQOJQ+hSbz5b/tg9hOjkHyWbf37+IUQouFdoDILaoph9dLGaM2j2YHpNJw==","shasum":"7187e381a23655565a23053ee5cfd57f9c1fece1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-15ccb28b76f43fedf9885432ae9ef50c8b4cef89.tgz","fileCount":20,"unpackedSize":40443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9Gz9eCCHiFTJRwLrlywAwOCPjFxJObbGIwdRujzdGSAiBIcwckGU8r2E0aRKvpWyt5cdBwPwJ8qLXUQkXC1BLagA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUKVzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV3g//SBm1/GcAp4QzMVz1h1tYJ8OHQJ/QnASjThR/ka2oHkGUegYE\r\nWN2wi36S6RCGx0kDaRg5ljIIRRRNyQiYhzFh5MyBkO2iTcPRgvRpG4YzJ6TJ\r\nI+bToMaoooKrXsdlMQDz61BZ+JHPVwyGpy8KiFVK7lCKx6MXnV+Gy2X6PgQf\r\nTubbMySlYRDmjIPiJz/qYbguoCyO/WndRnuo11E5b4ezTUhEwfNuTa2PYcO2\r\nVYoZDwnw75gkLtSQVnJiH+hIZPD36gS9G2ulYWNlJLU8pgz9xkFCVV8+bM2X\r\nupld6Me+KT9Ul31JD2Y4rPRpIcv0irKkIAL03kJwvmTutaJ9cU76YTWykGjU\r\nPH04DqAa7uDnmeuVofCKwP7wsdZ62UQlyUH4g5ckQ4K78fef3I1bX7nf+BVW\r\nYxhMT1GExVt4wtadmgTnym68dp0qEwqpqerJEJ0K225arMquQh2iI8G59pY2\r\nE2h8nwrvsdwPIUOxhGudQ4AuocW7hUmHO1CjBL2iXGsQTplFlwy1wlDOvT3w\r\nWlipgTPhU9Z6fYihlSIRFL6F5WQk6cOkYD8ijnvB6chuT8LT8zODVx/T6FAY\r\nV3n7JheiYljGH+8CrpnHOeRmGMWbhxF3IP0opgRhyD5+oKOlItF12LhkeFxh\r\nWiLFeXtBN+MIb4HES8vCC0nyho7Kxy/pFIw=\r\n=AaTm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-15ccb28b76f43fedf9885432ae9ef50c8b4cef89_1649452403452_0.27329868407553515"},"_hasShrinkwrap":false},"0.0.0-b3203f958c759fd4269ebb1173fb67a024d0ab98":{"name":"react-image","version":"0.0.0-b3203f958c759fd4269ebb1173fb67a024d0ab98","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.43","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.6","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.71.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b3203f958c759fd4269ebb1173fb67a024d0ab98","_id":"react-image@0.0.0-b3203f958c759fd4269ebb1173fb67a024d0ab98","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-TpqRco/zJNRUESuRMZboXxpg2clZT09kc1KOLOdXM90AiTU+9gGe5/SFl4tXweh1pkIKpnpgWPTZigOyTy2Qlw==","shasum":"ba61d473100be5b13a08c400eae1a1629c11f919","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b3203f958c759fd4269ebb1173fb67a024d0ab98.tgz","fileCount":20,"unpackedSize":40443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKGd8+lAYH6ONz/j3veUaAtLZHCiQCHU26NsrC8BvxiAiEAs6vuz6PEK4sDeoxpfxP7Uk6IvPz9kvBd0rZonBnM9XM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUKZIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzfQ//eMfLdlnp8znedwaHSR9Zi4MTuUB341DI3A84hRkSmfofJOQj\r\nI/6uvsrJaBF9O9UShrznpWF6ehKl+NXT0Mvn6n8Yf4dEBYx9S+dItVVNs6pz\r\nzyPqZXhh+ACtm8aqu/L2lwcr9rLCFb/47Zkz5wY/nQOH9CjnywXUKQ/aHjxi\r\nAKJfAObhMzwqLelZOA/IXdk7SSY1ULajFMygKa9wdk2M4Lq4fqEL5J5r1wxb\r\n3jH9CPkhUV2UZs/y/JwilYdZ2sYCG6vYQAVzt1Rk7Xp43dM+cIjGChcMLuTM\r\nD4qj+OOP1aKMntzI9VS4D5hAm+33DfCa9qZO8EOQw3qTbezMl1Q0Jvyk7NTU\r\nbyybCx1Noid5/n5vFCJ7SO2NLXo2C+Y0kmBlctYcUHE147RcYxooYo1W3yV7\r\n4irR6uS/uF2CmLkr47U4zrwsgT18FSYoWEnekD01KgIdCZtuvLUi/bSgJ0NH\r\nX5gMxXac7324HDpzu/WTI6kae16lu4uXrlEPmarfLtmT0JLD4C/e3dFL4Z7V\r\nNLl+teeEewYr88jRa9xC770y5jn+lLk07Ym8vYpZ/x+qfd+YV1k4MG0TUKWu\r\nRw2FFDstMpO7vBxPBBVpSoaX/U5wv1WSpJ7KpbqoDRmrXeoLHP7g9bkcSN5l\r\natZP3KIiE/tCOcPV90g6B/7m2e12HYLz1c4=\r\n=RLdg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b3203f958c759fd4269ebb1173fb67a024d0ab98_1649452616528_0.40771343886505806"},"_hasShrinkwrap":false},"0.0.0-004991d83b6ba95b6622d8d610e4bbc062842fca":{"name":"react-image","version":"0.0.0-004991d83b6ba95b6622d8d610e4bbc062842fca","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.44","@types/react-dom":"17.0.14","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.6","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.71.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"004991d83b6ba95b6622d8d610e4bbc062842fca","_id":"react-image@0.0.0-004991d83b6ba95b6622d8d610e4bbc062842fca","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-lfE21+WWaAdNBeN5kO/BBrSY5oQfOY07w6qHr03LrjedhpE6VtgJIqCTipO97tilfIb0o1VMNrqG17c0eZU/ow==","shasum":"fae113d5295dbea7897210930100ef4bdb82556e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-004991d83b6ba95b6622d8d610e4bbc062842fca.tgz","fileCount":20,"unpackedSize":40443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLl9o/xf4YiUtPEj6DRmNWWbIo5bHvB5sRCZJXFlQTXwIgH9VA9VotzRwjIkIQW1umx+IIpBuDIpfWkJQ9YvR99+E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUjteACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjrw//RPfywlO23vdaEucmwsiBFZZr3Y0KH/3GyGDWTbbLE/1nHwtg\r\ndCE8q8W6P2fK3DJ61I4S0UNJcNwl/RCnvCkLiVDvGNnPW9JRKep2EVdMW06d\r\n37/BaReT0krOHh1rI0tchMZHBYblayDEz9Ozcwz/eFwQjtyLrrr0RT/FY4rC\r\nPoQ5MmcvrTx5asTGrL7ECE2KRw4t/uYFvBd1FSLgGiWS6vbuKqw3EnCP473a\r\ntbzyJ1tvrgKOUygSbL+KRAgUHFBr7duLwsX2IbFGp8swS97Cr2HpMctgpDOC\r\nbxJvqHZ317V9eYWlEP08RHFA/vNXd4oRpa6rKHAJptrirDaSfttxcbMh2/YH\r\nsn8YBYCaXe2wg6+yTBbTg0UR0GH+3W7O1Xr4L/gdzPI22LgnpjfX6eNoroJc\r\nJ5R1ojEN/18kAvbGN2ZSwyDco0lyYUhtHoU9pVIW+XYdVXHfa/Dy5vGP6uAK\r\n3iValwAEowptYngbqFSlaGXOmS8baTm9ZaOA/phcw7GlSH0umLl2axH1xmDl\r\n3osEKnQPytJBlQ2DZo+PfYoGOm/IWMLonRSJDVk0a2yTvU4Aaca/ckUzlW3x\r\njV5z7t3Fpp+2mkmoHh8K7OB5+NXk2aXUt/7Py9urpGNUi2Aogx5tMKt8T97T\r\nLrSmYBpXyhj76EhM91PacpC0tmJFwMFIKFI=\r\n=B4Bh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-004991d83b6ba95b6622d8d610e4bbc062842fca_1649556318610_0.901914143358931"},"_hasShrinkwrap":false},"0.0.0-890a86954901ca88ac951851ab0d61c9ad8e255f":{"name":"react-image","version":"0.0.0-890a86954901ca88ac951851ab0d61c9ad8e255f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.44","@types/react-dom":"17.0.15","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.6","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.71.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"890a86954901ca88ac951851ab0d61c9ad8e255f","_id":"react-image@0.0.0-890a86954901ca88ac951851ab0d61c9ad8e255f","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-VR9yPAZHXVpqKcUx7IDRecTYk92YJelox1ark+vD2t86M5bIeEsSslAgfms+anyIMuU261oNB2eZ8eLRZbBxEg==","shasum":"b83b11dc3ae105d401b225fbca0c167ded57d657","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-890a86954901ca88ac951851ab0d61c9ad8e255f.tgz","fileCount":20,"unpackedSize":40443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrBNSmfc3ieemopjkLUMs9zYA19sGouajZTRvL4QtIMAiEAoDZvGesM2zIBD+83NPCdKjTWowvYZLGYhYBdlUNg9Qo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUjxqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpndhAAizEa4M91CmTBiBJ9E+PDv468gIr1f0Md7Cx8AgHf+PSxWtEd\r\nKbLN1I3vfZQy7yL2GVDXom6bkcxnkyv5VDGSeCbuAc1Pq4adb42i1zoBZMzk\r\nuvGoGbiJFuZg1Dis+9vZp8+KxtcvcLp6MyRlL/IAvs3vMFf4j0JZKO96sMxd\r\nZD27H/d3tKOMRgXVJqsZzZ/MOAr82dlZ6kzlbloARL2tGtNboHuZtOLBNzEx\r\nsUTLu32vxoiU+wSDaUKjRO4uEFZDhqGkekOFEsaVG9R7qumbwLvGVmowaH5j\r\nkeiyU9PN0MORHzqJAo/5GRJqi//5jAieBgjtUinWZiQ9UJhmsx4nzDlgIfwQ\r\nvxOVBEw6tbpbu+vfAG0HisxsAPn10BqycCwGHnkXw4eHbNYu6xLh4UvgaC3Y\r\nf1OxqinFkwAmx6TjXSAtkOX+an0j1CjEIy5i3xlmoFatslfofgzx2JhSxpVN\r\n6dy++bOd/71rS3mz9pe1HGK+yOWKoET48Yye1Y4oMqO5IC02DZ/UhjksFuNq\r\nqi+gkHKrEObrZYNmUMVlYxnoDqsWPj3vhPBIt15I3pO5lJ0ktiTKNzOAaEcF\r\nbSoRB4miRvcrjKg92e43r85GPYO/d8anU+/audhpvG9oM93wm1JJl50vmb4+\r\nLN6pvYvxje3G6QaHKNgptAfJvqE0r1gUbTo=\r\n=FW2u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-890a86954901ca88ac951851ab0d61c9ad8e255f_1649556586771_0.0325220311959491"},"_hasShrinkwrap":false},"0.0.0-53651293c00c79f9d614cff7aed9f665833fdc7a":{"name":"react-image","version":"0.0.0-53651293c00c79f9d614cff7aed9f665833fdc7a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"17.0.44","@types/react-dom":"17.0.15","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.6","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"53651293c00c79f9d614cff7aed9f665833fdc7a","_id":"react-image@0.0.0-53651293c00c79f9d614cff7aed9f665833fdc7a","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-kRZuv5CSWefUXGS7BuLJEoTIMmQPDqmTnuWxi49GbLI6DKfcwcB1YbPWIFZncom4TgUhf6k4/NJzf656mjB/4A==","shasum":"46d441e85b87f50f45960fa5650d7474f9876ec6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-53651293c00c79f9d614cff7aed9f665833fdc7a.tgz","fileCount":20,"unpackedSize":40443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/4ySEZFFB7O53B8GEpZjW6rRk0jbZ2JhrQyl+uwUq+gIhAMByo+GlDH9TGFVCDSB8TkxQKusEVkw50CzCKXiYdx8v"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVBD9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMRA/9Ft7r66H/s8+Z7XgZRAiCWI6FNJT0/r59xV2+Ia9xp9JZYZ5v\r\n7yTSPqGhz4ojPU+/lWN2+JYaxPUKQypdfahK0EfdJlvtAcUUJnfaeHeCEzHd\r\nnHbqafSEje/cKDWchgj/1zay8nLDWD8SRmmt76JjU/KrBGsRr6iIa/S3n/bw\r\ntM2uPU5vizVgH76jNpTRk3i3legpWiZtW6sDdhVIVyPUWlSCMm1PopNFyb8U\r\n32DlGolj7isSXrgF1beUaO1P8knR8cA/v3fA9SpL5bZZ/XiXksPuEtHF9cZ/\r\nG3MrxetQfAro7UAnkM9wUzZAvwgv1VbIDpV+GAV6nDSVboxZK6sk5A0YDUnO\r\nJuygoYON0yi8jw+7uZDt0VtvRBMvwLQbpachFHCIBHvV15h4bHsX1ATgEBQm\r\nre93BT07WpDyP6X67FtxHJiaxDz82sQ0NsG+bbfGmwL1fykyS3MtTbPVVLn2\r\nNGO52UPA3rFbBlvaa1I6GjEyxDgk57Z9KNn8gde7MxJKss/hAUUZofUnfAsj\r\n6PBIpw3kR0pme7UHKtf0iJJvJgQmef13XvvP8cwhPX0401D+9cvFttnCL97S\r\n1Yj1/AF5ngfkf/5PIn80ZaZlTNGrerxz2QoXxpwcaUZEQ5oZrud/9MxMQOco\r\nA78xwjdDGt2NLiU9EBPqB5KM4c3j/nFYdfs=\r\n=+vHE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-53651293c00c79f9d614cff7aed9f665833fdc7a_1649676541375_0.06121071203743522"},"_hasShrinkwrap":false},"0.0.0-6914bd95fa4a7b0ad529b46b7a1aa27d41b6a580":{"name":"react-image","version":"0.0.0-6914bd95fa4a7b0ad529b46b7a1aa27d41b6a580","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"18.0.1","@types/react-dom":"17.0.15","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.6","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6914bd95fa4a7b0ad529b46b7a1aa27d41b6a580","_id":"react-image@0.0.0-6914bd95fa4a7b0ad529b46b7a1aa27d41b6a580","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-gpoHveUwZKVleYvyJzRuuKJvj1HecuNZWaFLLDglLLqDcVMNrsur+mApXOJiQJGWFH346v9hQtwo/3crqrTo6A==","shasum":"3ab077a51903ba6152e0340c9e94e6d10ea49c50","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6914bd95fa4a7b0ad529b46b7a1aa27d41b6a580.tgz","fileCount":20,"unpackedSize":40442,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJOdt3yDJQh2OhJPWQGCb4elvS+SPm7N2eIIMZ/FFkjgIgBCLJRiAykv80cF14MHkm0Hu4j9KSfyHe+mTTgqcv4eI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVBF1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm2A//T4dU9VKKTpnWp6BEoR6kEpnZtngq6YdxU9Pf+icLaUGb1dhX\r\nq/qsL/fFS13DE/Y5WPQbPXNhOoQMlmoG/1JGvdxFxaHzOBFsr9tbOEE0vcd4\r\nvgsCQn6FFnUDJWm51m5w3jY8BAteRCAjTr3PKHbSm/9AcXxtiB9JEPHL0eY0\r\nztMEUbWqgpMRzjpq09rPhxOdfkmLbfs2ag+NaRBwLKkUvS70dq67s8JkLtwF\r\nL0h1J56Cdd25/SiapFggP28CfGWbhNXJCQZeIPXVvqUwbnOPz+B/saFtBrOj\r\nZCxr2WX4YCbSbqkzgpkjCC+9cZFxDbHeAtQgHe0i35msHBmEzc60FbPWOjIf\r\nYoWGxV/GFFRdWRZlie45OSVxwCFlzPku9rFIpzStBJrGnU7x97z1Hc2UnV7j\r\n9yOBd3NfkYnMSfH6ivUlbxmNev7Y7m6aOeAhktLL1IaN+8Xtl+rMj1j822Z3\r\nC+WXBpv2onaGpjuQ/MO/IshO//EWdyQ4EadgYFAs086deGa4VYsKCTT1QeaQ\r\n1HvFtCsAA/+/ZyDLvcZ/Q5CaGoS50FaIrc5ZVkrVG6KIZVDbs5IS0F/w3inE\r\nOlf8GrV/clJgxhMIyZ5LGt198S0SZdE1BZFXD1YDtHKW4JOjPvvuwl179EC0\r\ng3n0n+gAIkuG8oca6d98/g8B/NyZ2djTI14=\r\n=U3KT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6914bd95fa4a7b0ad529b46b7a1aa27d41b6a580_1649676661129_0.6239676804225636"},"_hasShrinkwrap":false},"0.0.0-ea55159a1a1fd0616c55aa25835a60c1f570a660":{"name":"react-image","version":"0.0.0-ea55159a1a1fd0616c55aa25835a60c1f570a660","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.4","@types/jest":"27.4.1","@types/react":"18.0.1","@types/react-dom":"18.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.6","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ea55159a1a1fd0616c55aa25835a60c1f570a660","_id":"react-image@0.0.0-ea55159a1a1fd0616c55aa25835a60c1f570a660","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-tdgLP5avjw+uYRbsKGBMXaMTo4htUHTNFjsLhVbUM1mRXlAJG4ztU32ld6OFnCm/zsw4BXUTykcrf5m9EJMESw==","shasum":"22d97d6b864e51ba0105ae3d9bfa15151bcc4830","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ea55159a1a1fd0616c55aa25835a60c1f570a660.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+/7Or8sLRhOxYow2VPDLEsfl5UbqG2qhSRVEFgWmQRAiEAxztfgVaqg7kz1heHL2ONBFdz1Lq9czKJ5vsJzC8BwF8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVa2IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKLw//TDnTKTQN/kwaXNgAL6nSfWZCweydt0Y6pa6RHFGPIVv4in+S\r\niHBXqqfYNlsg70QIU6YKZcnw1g8eKhs4vY3UfVfwWeSltOtcRFysLZXMw1V9\r\nsHz63NXqBRsTM/ARHoRodxWGnJuEnP7tZ4Tv1ewQ1onxniZlBWfwsBfLZDpS\r\nQYuCghZLuzu7McJ+0xbAlGSzrmujfSOqu1MLVDVBK17YGVyJuB6KVtb7IWiR\r\nFs4YSrLJS9lFi3H64AnSug+H/spIX8mEzHkZ8okm6g+SVzSs1ygAsf8EEEqP\r\nOYVWsCED0Q3yV3bQfBlL83accFUasZzctRHXXzXznF4kdhHuA/n1r7gi4Qxj\r\nTHRj4h3loVKI042pF/DVln+4+a7Je9mNUyid97HN1uiLJwTKL2zywTmi4zKn\r\nvxCIGefvFBQ6IFbN8ejcTNfpzUSOD5dupGCjCtGGnNk8x1c6kwvyEzUlfJ4L\r\neNfX1cCcTS4JMzE3rLaKEfshlaDeLembTsW8/62qbI3NdIwpaH4p392kRTqY\r\nYlf+fNJciVE8nUmrULaTDaWs1sfPkRdKeg9193icj70pEq8ihA+jp67m3UQW\r\nmVZ6KF7ejyrPOvSyr+hnBRn3/J2oR1nRmEe0iSDWqwjgxDWkJ9I8DK5z+in9\r\n2x9p8zJOzhpAa+PSAlN97/iEF1qA2e4gdt4=\r\n=sQ0V\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ea55159a1a1fd0616c55aa25835a60c1f570a660_1649782152705_0.9834576914070334"},"_hasShrinkwrap":false},"0.0.0-1622a18980a84ba9a9615b7d080db8d5281a44a9":{"name":"react-image","version":"0.0.0-1622a18980a84ba9a9615b7d080db8d5281a44a9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.1","@types/react-dom":"18.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.6","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1622a18980a84ba9a9615b7d080db8d5281a44a9","_id":"react-image@0.0.0-1622a18980a84ba9a9615b7d080db8d5281a44a9","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-9KOoYCuiZEeVAJnNsDvdkqbdry19yuFnHX08oALLybiRmdRHmph0/ec2YekQRDYZ4rYNHw/eRMhSPFnn1uAnTg==","shasum":"2dbbf18820e8abf09cac046af96459c398baf09b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1622a18980a84ba9a9615b7d080db8d5281a44a9.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/JadZisrHDatXGibFrGtLr/MgcQ6yhg3veiarhNNRwAiEAsvnm9O2Wh6PFeFWMLzmX0T/uR37F1eNFw2O/25YOGXU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV1JZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBvA/8C1vNEMzWjZnb3bVDbKcRrQ1RFaDKmRXz/yvuUlGFf7kuowhQ\r\n2gXenuFuihPkQlyiD6h1BT6Hag9XPl5BUy6l9X5H2AT2mZpdpjWKgV2X3taq\r\ncv0rpIbOGc3UJ5aHnpIcnHS+oEOm94A+FsfWlFB7yKNn4gM9PuZEK9mq1PKd\r\nxaJFvAZmDLnwSfm6OQ5Neqzr3TQegLg8u6Ur/jsyk0owamoSQyEVtEFsculh\r\n/n4AS2SE2zUjeG3ibuHiKYFv05EZm4wSkVc1ORwNG2PBB8pzUZux30qc57sJ\r\nNeP/YvGZLHmLXO1WPoauWKAKqQy3chErwV2ngphTWp8mj8YaV/0rQv+kgqc0\r\nOSEvKpYSjDu/aJex8rP3/qdSQ3fvVl6kAyj0X1Q6N0heVBvXoV98ODdGkEo6\r\neQIyPrWKYV2+kG1HX56RS6gU/zaJC3yMsC8n+TDDP117zOjXJS3VMFNRg5cD\r\nbKS9fbBliQ7qufWxxoSxxrltX0Or5HVs+iPqmL7msqZ6vlNcxss4fn28WmX6\r\nfrR+qlUJBVPhoZF0JTD0x9y7rsUrar6GF0EBbjtXMBvgEEaDLPmXx1eLQ8O0\r\nkEI/d8P5auRiR6iiyrhIc16nVM2jPlNT438ghIdPUX6IO47RglSXSpplU2+K\r\n7uY3M86dU9EF+9SHlNJHvYK4l59ryuQZXD0=\r\n=OWJa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1622a18980a84ba9a9615b7d080db8d5281a44a9_1649889881095_0.28172461227751966"},"_hasShrinkwrap":false},"0.0.0-88b76a6d41fc5ba3cf8b94f59f20fedcbb8595eb":{"name":"react-image","version":"0.0.0-88b76a6d41fc5ba3cf8b94f59f20fedcbb8595eb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.1","@types/react-dom":"18.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"88b76a6d41fc5ba3cf8b94f59f20fedcbb8595eb","_id":"react-image@0.0.0-88b76a6d41fc5ba3cf8b94f59f20fedcbb8595eb","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-nO4xVSqASl/1cC7tuKADICs3KJhln6reFteEs3BzwW55x5GRuFh6yd4viw5sPdFkHWBSs6C1zlmi0DQ3MaHRPg==","shasum":"56ccda66bb73efbd9901b0d18914129b768bcb08","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-88b76a6d41fc5ba3cf8b94f59f20fedcbb8595eb.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/ZijXJfp4on5qpX62vpxl1SzcJnMbeuzdJ/h4BwmeQwIgb5xWfpVeiqak7NiYgyreByTVesRDcnnCLxWTfH7RTCo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV1LSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdww/+I7TtPm9iSc6JHrhWELRVBptREKLLYroHtIcf1PNiiqQqlvgN\r\n9v1+4In5i4Ppx9NUf88ldrQL5XsseEe7RtY/xzZvcKv5SdHLgjhZPho0Qc0M\r\nI8uwZHNMbFb2f3zztJRVbwu5em7ogGDTO1SQ/GkjpPz6cjXfpEU23JdoxOHA\r\ndR+Y2v6m29P1F5sdTsJvsXa72ntRWIOTaDpex9SdfRn/5ftwdpWIaqhFqGUb\r\nwQbH3t4Vf6zZA/xQ1fyn/AN7frcxNigv0Xr9Zmq2FOxBU/rWeAL09ZufRr8a\r\ndIDY/2GmAJlaiiy6eMIB89MdLhczZxaNoBe3ODjJCMg2JjPMeXleSTjRz1Jf\r\nW/+MHKv1M3QSWKhmWdRGGFtvSZaDYRNjxZDkur2uNHpK3kU1n5QTpLZnkXfz\r\nC+fkesgXEtbh6vyMe+02AR0qV1VGBUFnNRLQeHD2bvGijgCMTHo+3sRgeNfG\r\nOkMXUY2lOqRtIKaopfrqkaFXQcwIwm9Dv5jUQ4+2LmKXcXXPxLi8B8yRl0yO\r\nbZAzN0KxMsPzgoZQ+2r2khK9MoD9+xvbJzB8iVXpoR21wWBIk1IMKwkCJQ2p\r\nFrfflwJ/B8qY+RJgqo/gzwbCrDu1kICUyACdbDQ8qD2SF/ty+7V02I/p4c3Q\r\nraEqwYWxZcWdkoAiwxEXXFJUhVksOfTWu+M=\r\n=Nh8y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-88b76a6d41fc5ba3cf8b94f59f20fedcbb8595eb_1649890001936_0.2652626009534753"},"_hasShrinkwrap":false},"0.0.0-3485298a7e027c3fb03f675086c05894c67efded":{"name":"react-image","version":"0.0.0-3485298a7e027c3fb03f675086c05894c67efded","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.5","@types/react-dom":"18.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3485298a7e027c3fb03f675086c05894c67efded","_id":"react-image@0.0.0-3485298a7e027c3fb03f675086c05894c67efded","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-uIT3h9LtFBoUGw5Su1YXl6SqaEYqDXKRsfSwGrP701Ur07HNBskJPPAdYiICXfmW8G7n1+0TBQR78clx0a78OQ==","shasum":"c523d847b9789a877aa357c53a7c3fe564e18ed5","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3485298a7e027c3fb03f675086c05894c67efded.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYcQhtjkxBbWmDa1qGPqhivjby44kBOmAR/reWPsFkpAIhAP7vupJajBhHs8GFu6v24/s4FAp1Uv9C7BtwAtWDfYRR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWYsgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofRw//VTRBmxSWPI0guOsbN6/Wf4BVpCs4dcm2p7ycodbkV9a0lM4j\r\nmetcRvWa6TJvlvq32KhK2cO9VEOWj2IjW4lAzj3e3FETaSUpHNKZt4xrhOUd\r\nStsYvAwZsv28OHghO+jVnO65OHUZ+/Oyrc2bizZHzR6aorslMbI3eJM77U98\r\neEt9qbfon0CWtlyFM20qhNRLNWRdKaNmmnxp3E63Rm0YxS3Te5Xd2XEF3SNr\r\nauHkYwBcpS7dOedzpXxgW0jnbOPkyZKhE0z6CP9ubkvpZy+cfAykYfXqhsC5\r\n+6P+oWeUGDvdrPBJcoQB5m3idLZOVbDzCekBhBMbe6SDcpbHi7wwIcdXzLpg\r\nyr0SrF7OW2g0g/BHUkeE+kk+oXarDl3paLRt1FjTiqjzRei8RrIhH7OVZ5Ye\r\nDJ587u45HT1W4ELyPSiWyvtoqrGazHy/p3zU+qStjG7jVOQbpRx98K8H65R9\r\nYnwKOSqi1RXqVC69W8kDxg/lGqRicyb4kS5y0yZyHq6cyrOeMXiuczdN36aM\r\nz+v9mSeNZtzyXmurgvycwMduVhM55iVhl4klHr0DXj93fQPIfPZWJIy6hUTD\r\nDS4Ltt/3gpJG6Z+DwfZjfDXf8nwnEyWZnH+Un3kAEypdqVB+PCftziJ56lBp\r\n2poVuy0N0YIlmY1xTJN3Iqv8L2AGAlU6fLQ=\r\n=ycTI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3485298a7e027c3fb03f675086c05894c67efded_1650035488605_0.6777701899948292"},"_hasShrinkwrap":false},"0.0.0-7fcfa255831a139c120468f53c883fd441159a0f":{"name":"react-image","version":"0.0.0-7fcfa255831a139c120468f53c883fd441159a0f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.5","@types/react-dom":"18.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"7fcfa255831a139c120468f53c883fd441159a0f","_id":"react-image@0.0.0-7fcfa255831a139c120468f53c883fd441159a0f","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-RPcIuPPzepYWETCcMR3QWHlX6hkJcScyUitAqInJHpsT2nZihU3uIsr/5QKSAqYbWycqndWRbCQpPWmSstYH+w==","shasum":"04634c2786232dc78e1a35ea52a05b2ba6875689","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-7fcfa255831a139c120468f53c883fd441159a0f.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBNws/egzI162gFemA0WIs1dCknUQLXhhLxuOitp/078AiEAvRdbxtAZbTGNP2ko7sqoJlafhEpBkImwc+Gr+L0xiJ4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWywWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3YBAAhNOc8ep2k4XD5z2CJ4MyBuBxKL0kxCnSvhv064dUrpmFUYqN\r\nH5/bqtZpXTMNSr9wMPtk8yweE9EfErU36jrEV/NIxf8kfdMFfRQb7B43wBFC\r\nom7u7UGmRfTTYgbT7k3B+L4sLy4g0wB9l+z5dwfGlxzT9pXSVYl4m5VGPPHo\r\ngFwbdeQJ1mXRimazF3SuIEqWpy67amSUZRyZLlbO+Oyn/Mp5N0YR7Wf1vMho\r\n+gXBoCzUxfA8Txx1qbYmzKkO8LE2Yxqr0D3JzCKeiLXDKYZuYNiBc7lxL3MA\r\niUvkI9JURIz40E36zdNwxreAyWlAC/QZlirc6KqTXlLd1XBPqtHwYMdCwjga\r\nWyB9wVaLRIcJOEcx/L9YiUGD5CkfNhgcluBzuSQZz9I8lKbM5/4QRK9zGz4g\r\nJjy0mWWpwVorCANn9szSC7gW9AFfmsF31uvDssmMyxt/TtlDiUg1fI1T9xmY\r\n1/gAnL0xseliRo8sgqAEQu72SU/42TpK80scZq0ePWLEZ6QiCGwVHhkhXS/n\r\nulMnYDDBIr+L2DrriuTmDFmzM5eCOuVuTBZl92HPjoyaFVtDGTpLOqU6QHZA\r\nIkjHjZ2ix3CCC4/RNixfItJ3xo/Omg/m2D7Cw+1g/1+QgfK4EwxS4GXhTMMd\r\n4HZb1I4lnNlmwfXa46tL+D5dzv3DW5qYn2Q=\r\n=8H3A\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-7fcfa255831a139c120468f53c883fd441159a0f_1650142230528_0.660923297687221"},"_hasShrinkwrap":false},"0.0.0-d823288a3b5e56e66eda7986844a6283e692f7b0":{"name":"react-image","version":"0.0.0-d823288a3b5e56e66eda7986844a6283e692f7b0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.5","@types/react-dom":"18.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.1.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d823288a3b5e56e66eda7986844a6283e692f7b0","_id":"react-image@0.0.0-d823288a3b5e56e66eda7986844a6283e692f7b0","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-YL+15J43X+XYwiaFC0jV46RjhnCvnAFEdenkCdKUOpPrv5vBOHv4TptnqsHXxnAhHBDXRQSG7ufHla2PKbovhQ==","shasum":"abafdc9f38e66b5f75f05ab0287fd72d064864f9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d823288a3b5e56e66eda7986844a6283e692f7b0.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaHAF9pf4lRb9Wtrp1iKU/oi71yU0rXUIpb/GrmeupHgIhAJTCanWBsbKbpadUgFANoRs0cbio6jyphl6x2rVVkkMB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWyykACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/kg/+Ph87RY1MGD2ux6D2tClCtGWV0xfC2eGSSgnnvAqzN1uXGhK7\r\nNvJJsVXGQKPW96pQ7b44YWUh+rL418RC1mckn95OH7sFQgG3VfEJa+4Kje3m\r\nXStQZFuNyOGQbQu2b8FgxrQPKjxSj52yw2tk0fcFeZxsmAPd1R9Lc8QDEVQu\r\nhEkoJ8Ry7hBheq+s82xGSnIOcq7SzZluPBMT3gCaMhcUTTJoyNQAF3PRy6lp\r\nqpeD4oWugs6Ydnvg+8fkeac+sBxElqIBU5pmalEWsfoFd15CpbUKtdP6LfQz\r\n3nN5AwkUnDkmXVqzxw2R5nA4beNwnct4VurXd50qb3HzCn6x4ZT476UECQko\r\nRXcw/GamBFtpytRrqsgkdTk1URmuk8zks4dcdClG87SQ4veFiKA8Gj3UwF7S\r\nTNaUZQQ3al1H3OMwWFBV6NWep3dmrBoQoPdi7HEz4n75jed1XFGhQNEAJASq\r\njMbTcre+ggWSW800t0ySpxmGHpnQxkOlrrNGKwZENhtQGlhnY5qaPP1NOQeR\r\nvB4CQRRXCxMweX2+E9uzPikR/Va75KEPlRrAufDNe9Xr51FmsVeK6itJR9mO\r\nXjMzAcZOdj/Ekp0cdkTW8lO0MrJTXAPvfCp6hgGZ4GvCl4NNUu/mzTK69BQI\r\nfyY4tNmO6Bps3FQdhzY8TtsOGAw+nl2FMKE=\r\n=y+Fa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d823288a3b5e56e66eda7986844a6283e692f7b0_1650142372126_0.5511218054736933"},"_hasShrinkwrap":false},"0.0.0-229515e7942cb2d828e0b4aa44e7a6a637167f2d":{"name":"react-image","version":"0.0.0-229515e7942cb2d828e0b4aa44e7a6a637167f2d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.5","@types/react-dom":"18.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.4","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"229515e7942cb2d828e0b4aa44e7a6a637167f2d","_id":"react-image@0.0.0-229515e7942cb2d828e0b4aa44e7a6a637167f2d","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-h2aFlpPQhNxh6XpWbrxKLE0roI9viVTUXyHY5TGYodxMKsVkQT2p1TdUwnJrr6KaPwVQ6B0SwcbMdJPKXx0mgg==","shasum":"5feaebeb92fb5f0c72523c3f58adb5576d81a4e9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-229515e7942cb2d828e0b4aa44e7a6a637167f2d.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvY/k3SYSvBAgkkecBWxSIYXTsKyT9ZgXCVpgvxOOuPAiEAq+VFAgb4WlCe6sMCTiRyQ+ckPRKW8R2rQo2bFqAdVVQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXOBPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokdA//bTH8uriS0tCQFrbHa1LNneBseoAzNrBBggonlru3/3XIdsRO\r\n5Yy/+RxbPl7rD6gVhcJoSOcw+MqzaEeRKpW/vi6vUN1D1FF+CRxTgxLjX+XG\r\nlsRRfaw+E0/c7dIHLBgANS4BSaISKGCdjW03gsyQ/qsYQzFDjgQbmMaqI3/S\r\nStokckj3Lvecp19V95Obw8yvwl7fsN5khyOs/X3blA2wYhOYWpyOgWZW0Lan\r\nem5an+yLk/Bbmjxly3AIkbM6KeZ1aklSw7TarUEzIMQFRjokcRLsR0QWAy3A\r\np3SkXMwwPBO52r4WL6uMl7969P+YlzBf+suUMRhkd3enauP2BbTSoR22djBx\r\nNvq9aO5A3OUS097eD2IAIAgyDdgRhgeSrTnDi7jLPcLQ4WKCeGIN6hy1Vusz\r\nMMnOYDhypNc7ucvHMKYqmEXtsSaf97wayikiAhplWWHLKHwVjYJ780vKo5l9\r\njjPFFVgMJsdbLfvIMBZUNftiZgQmaDFGQBFkDQAahs7X+TgGmLi3C3SqjGiw\r\nxFpiK/nCIPphVSl3W69ssuIuPPfhJExIfy+1vpnxE9k0DTzPFa+UhAjNwsdr\r\nRB7VvYV3pjSGjKP03LKsIDzvVsQ7dVeDA1etlHwv4HGTCQRLhuOkdJpQz/Yg\r\nSglAQ8Qyexzgl+9GxM/NUBtBazhsLU7ONf4=\r\n=JbUC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-229515e7942cb2d828e0b4aa44e7a6a637167f2d_1650253902857_0.3864772341176348"},"_hasShrinkwrap":false},"0.0.0-503c1a6a7bf3f47d7c1ca2d81a023cbe5a7f0544":{"name":"react-image","version":"0.0.0-503c1a6a7bf3f47d7c1ca2d81a023cbe5a7f0544","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.5","@types/react-dom":"18.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"503c1a6a7bf3f47d7c1ca2d81a023cbe5a7f0544","_id":"react-image@0.0.0-503c1a6a7bf3f47d7c1ca2d81a023cbe5a7f0544","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-uOzbUq7QkkVS0jJl9bIQeKXy2WvHeWfA2wVK10Und2oZHIRpdn1GOV+hSm3h5Ohk8PRTL2ZjRv12YtfP0HirSg==","shasum":"82fdb8a60bd6aeb2d292368558b9c8e7b08df399","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-503c1a6a7bf3f47d7c1ca2d81a023cbe5a7f0544.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiRLphIESS+k0/sh45bOSHcHKy6iRpMTCxcTZu9oQRIAiEAgSEp5UfBp/rcmdSlR3UR0JUnnCKkdFaKFeRtR0poVgM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYVR/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGpg//cquGiqdSmQfhCIlXO6tvgwMTvDmW5eDM/h0fUuIY3F8ZvOj4\r\nwsLVu1CvkO/gShS5n1PhRj2spWM/9q7S/t7Ty+oGc3G5NWlkg14yqm6zTbRx\r\nXQVkA75IKS7eI4myRLzibNIHDwU6VDXyAMmVqsiFb8eWDgXr4m9L3ojAjO/6\r\n6eyf29lCnp5ZWCzcH23N0o1GZGZUObQPMOG4hAztPNVs8f51kpP7/DDLokVD\r\nfTimoDahvrLmTHE3Fe7k8fc7eRJT5fK48QCxIOdFlbJPhVj8morYLMs+L/f+\r\ni95Y/YEM4/xEvxUD39+NmoRWtX+vECDiUamqoqK/KB/VkfozkxPgwIssW57x\r\nTwfNcIyGnANbL/KRi/eU89bsgxcpqBp08v3y3yeWxy2vvAIHAYFdyyFoVGJo\r\nxcdB3LYlHipUthruLMlQPBX7hkImIATknQ8YtORn3FHpcfkWvUF5fOF2O0fl\r\nniSPjHHH2qOkvbN7+/c0gLAFhz99RWMzYwnLI2hwAOqSo0UfWUxjNktrsB3y\r\ncxLAu12kQMloltRlDbgKTXcShSxM8B2IqakU79E2/1/NAEtA86QuTBNhUNX/\r\npumsYdTdBfCpjRXoFtULdz0WGVmPqa8P6bs7ZSR11HXl/NM6+RDtM4OFW7e5\r\nKt6wM5eYmhZazNygWkfo/UTSsyvBw1/tT4U=\r\n=s2Q8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-503c1a6a7bf3f47d7c1ca2d81a023cbe5a7f0544_1650545790970_0.8762306324154032"},"_hasShrinkwrap":false},"0.0.0-8eab4e18db8cbdac3b8c2e18c2a95064307e0e0b":{"name":"react-image","version":"0.0.0-8eab4e18db8cbdac3b8c2e18c2a95064307e0e0b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.6","@types/react-dom":"18.0.1","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8eab4e18db8cbdac3b8c2e18c2a95064307e0e0b","_id":"react-image@0.0.0-8eab4e18db8cbdac3b8c2e18c2a95064307e0e0b","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-4lhgNyLg2ltOoDFH+8JfN5pJ4lwEUkzyKoMXy9xIh2o50y68QEuDKeB1bCfjndyJeSNVB10uX92zFnssQqGpag==","shasum":"707be933a5687334977227fca0cb5c2fe2c04432","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8eab4e18db8cbdac3b8c2e18c2a95064307e0e0b.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpqMegNcG9+2yPzikTw/A2HkatAYvVbPgjhX/0P5nMWgIgKky4/1yhwtDrjp/vfQK3/ZMK83RToPOutBKi/PzEOEs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY0sDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwuw//QQ6yQQAhF77VQF3zWOpr/oDbbtyPThZM1R2Tm/E3v1vnRdSR\r\nnyRx+VjYLM453xc70aiY3Zv7XsQklA8co7KFxvaY8+Boh3QonIGnY4piViuM\r\ns6D2nE+JeiLRsdZ9VqIDzainBieX94OyF5rMaqeUnwrV9QRD3oBdgA5paOKM\r\nmCqhjGdNsVmgpEI16ZeK8HsriqC0w4gxMfu7QmbgQ9jBYicUWlcpKxSKRb3A\r\nAw3ZPtZD1Qg3Hr/tRkVhXXUObq9n/EqC6sN4ps8cEzt2sG+OonHpd4QtEGTC\r\ny2t/MpPXv7DviY5MlatEM+RYt+nDad1If/t3qbp5/Dlgc1vlbJcOBAA5bTh0\r\nm5CUY9JPDVh9tKtNpGNbGkCRF7Dl5cYWmZkojWYlVxFADeBmS5hBxCzmBoNE\r\nFkcQApycFpd5Mkg3OL9DWfALAbPW0LryGqFm0Igo0yKC5C5vJPzQeUEqawhu\r\nJ7+6rqwPR1AEjFod73pr90xwJ+PPXWlf2GLqUgKhzSpcYi20eCUWAl4tduGR\r\nPPxzu2+pnjJxrdr09vXeluZ/aTyf6DlNFBpgKXkhnc3qUnNodFpsYasDHAUX\r\nnf9iktI/Av2KIByCjF76kuUnnL8s4IPY7121sr4eVyuPploVuIOt8Nan1OqQ\r\nFhExdzY+lJyIdHKI4lb1xKO/XYaxpxwZFcM=\r\n=lmuw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8eab4e18db8cbdac3b8c2e18c2a95064307e0e0b_1650674435688_0.514487557726929"},"_hasShrinkwrap":false},"0.0.0-ea2342733ed4a3fdea6057858ddf3254ee7e0e38":{"name":"react-image","version":"0.0.0-ea2342733ed4a3fdea6057858ddf3254ee7e0e38","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.6","@types/react-dom":"18.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.17.3","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"ea2342733ed4a3fdea6057858ddf3254ee7e0e38","_id":"react-image@0.0.0-ea2342733ed4a3fdea6057858ddf3254ee7e0e38","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-NI8wBMYzFwSfjkx5Aq48BGwxlBJsgnsimdD8Y5PzxdTBcM4Z5CiljtvgRzebm0Kr7WNNoO0O6lxj/AOqdqQ2vw==","shasum":"e4a596dce57886be1fa283b465683d441ffa6b85","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-ea2342733ed4a3fdea6057858ddf3254ee7e0e38.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrIMRgxoHX1RgpOJ6SquoYz3bu2ppEnMQVoRFhyqPeigIgB1FsEow9iCuuBZ3Ws9+wuBE4OApQvYwfBovfIoitQZk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY0tgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokCA//QEQR4jzDtqErqo24yZhCSuAVPpvuFLlSuZ2Lgl4wXubrG9+M\r\nH2YKH2wWKhO9YYOu31B1QZjRYvVp+iKrYYG37ZWC6vF8KAfJGk7u51GD5GjI\r\nB+u0Qj6NdrPyYZjKWCHFwIa31d6V64f7qf/3jCtG6nHbcFctz8G5zInjFaGN\r\n5/KhM5GaLVIeFrMmjWf1ckWCRB/60Hg2szYooInjfhM26dZz3nwByEBlj2uc\r\nKTfTKiIVgn2GJO3Esnwp1QE2KVUj11F2CzcBrEKKlwvINTuEepFUHVxzMsIA\r\njr5xkWNNyl5QTHWq8vIKBvp4L6Q8d/5V3/9v8JaAnLUtBv8maJ/gP4fLattN\r\nRKGblW28cogKLWS7Es0w+h0vMhwflTGIZjEFnEOuNvZYls6b9BEN3gbNPU4p\r\nz6eL864r8y5gisuWoHcjW98vstIYR6bdCvUqzRy9U7EkpTXbFJXge7Vl+HpZ\r\nsXVn6c27anpSeCrEXFFZ5chKBlY45yI0n6/UAPUK0Jw8ryweNqjMQyiqajsb\r\nryRrAIOv+zbzC0rllxNh+Dr4em86Tj80HBrt5bQuTnWa/wl6Yu6OkWCAEiyu\r\n+/Awmnx57yblfN7Dd5CtkhszvwOSabk+IKfKmHwz2Pj1XnXgAepxvJrNFfL1\r\nkb/e5YMITRc/DWhGtrwi+sNKxlgOfW3IBR8=\r\n=88Pk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-ea2342733ed4a3fdea6057858ddf3254ee7e0e38_1650674527935_0.8539555458534649"},"_hasShrinkwrap":false},"0.0.0-9c6099482fc94b832d3558e841d4928f13062c05":{"name":"react-image","version":"0.0.0-9c6099482fc94b832d3558e841d4928f13062c05","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.6","@types/react-dom":"18.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.0","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9c6099482fc94b832d3558e841d4928f13062c05","_id":"react-image@0.0.0-9c6099482fc94b832d3558e841d4928f13062c05","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-98DQDRdvV5RWh2VyBAG2XcvxTqumxY/1arOEDqVEALiNowMtMsBqoNM9GXf8jv4mzcorVDspx6riNsraI3dRew==","shasum":"4263b4491c2f5640c0d51d392314e35fce7c9036","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9c6099482fc94b832d3558e841d4928f13062c05.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9lPkDaGLO8w/Df1iL7VBqxxCpXuv1H3JwCP+E3hrKpgIhAMI+w3OPcIORNTwIL8ERSJKgupJ6J26Cjgb4TZMSlrP4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaKPoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3Aw/7BtUFSVw0Xy7iv/UdeSyPS+gOFu0EiDjNakAL/6l88RmqZHYF\r\nyP5tUBO1HFdodr8yYcTK8HlqmLQlJ+xiHyPzB79WsDhumuUCrBTGmW3uR1hU\r\no4vcJch24BRgkJrWBw6rsntZ8lte3/sszZebQoiE0zQEE0e4Ao662d/RecWt\r\nHGHlEa5TBWENaC/oQSl1E08mHT8+7ecrdngT4wb7fo/Syxbmdp+2Fnz0waDw\r\npzBXvoca1u4vBYh99NyefdnpLP5qoqOANhzfyD5CPNla5zr1Habiyc4b0sgr\r\nDGoVD0moSfCqYHSybPjgntcjXdrGqH3DeqffRbDjGp59fzamiqkgP/bq4YmC\r\nz/2A95G6ygcuLUNYYQCRLbM1qbonhvWQlneRcdpS11MBVHx2zzXmN5DbHPUj\r\nuKd9DL30leIsn93/55Jph7GTwQ+aagdTPCw3hao4rQxeTfGn3O1pRgJwKjS/\r\nAk2ZinwtZ/+w+R3x0yUPc6rYfC5NRRuJwILHwfteIRjJuX3XXIAH6MvndLZD\r\nszTd2D367+FUqbQucB+VRPuR/uDsQfct3NhPRAt/LjEgy1O+OAyaS//7SoSm\r\nyvAW3MUBKcv81xRzWDQyI/mA2nSKFZJIXaVqJs8sDOVjoq4x/vmWrmwkNAG5\r\n/08gd276cJjRliUzukadmQ1l0bWi/M4BlTg=\r\n=LZpQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9c6099482fc94b832d3558e841d4928f13062c05_1651024872184_0.6143919191748128"},"_hasShrinkwrap":false},"0.0.0-9c35ddceebdb0fd84dc769c344e58d2e468e9085":{"name":"react-image","version":"0.0.0-9c35ddceebdb0fd84dc769c344e58d2e468e9085","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.8","@types/react-dom":"18.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.0","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.8","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9c35ddceebdb0fd84dc769c344e58d2e468e9085","_id":"react-image@0.0.0-9c35ddceebdb0fd84dc769c344e58d2e468e9085","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-ImOCE42ITdk5ivaHxaQUWt+TpWejf47lbqZA0Wc4fx2Y7qzEhZlb+XZtP94IF3K6ljvBpy3TYj2GNjG6YPflWw==","shasum":"c9873e026bf221dc017a32458fdbe834ef281ec6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9c35ddceebdb0fd84dc769c344e58d2e468e9085.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGJtf/9WB0OFl3PPwBPO7lptfkzF0LJzUICjWJGtmHPAiBbIW8ifdYrEmgz0sE8OCDabQ84i6MszU8FVvwObKnTpg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiajTdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsTw//W8Q0mNSXVBxWmYdoXXYCcZctVxKCtShiD+E+TIG7TBrOtN5C\r\nBBo68YktFiUUtAPgamriL1igRM6PYZ6nfcSQY0AsPWsqNfkdb7iVRzr8T9Gu\r\nCbKsHeU27LxXAJr0inXLRO0N2ML9g14DlTWjtt/u8sitH5hdD/eYIG+J/mY6\r\nO3f7rjgafMmUmpk/5Dho6+bpbtuAZmJ/G6PJ+ZkmCzLiYdycbU4GjaU0pcdD\r\nVeexXx//dILYt19PtXqqAJHdseYnECMxT/0aBi5RyuAw3IadzWwV/vgOzyX/\r\nwmluDo916ZtFrQyIDeRMew3Oain4l7uhmV8xjCHDlvehYqeiadIB0evCcWe5\r\naNMgnbhm2I0YSHwaWAMT5IAts078x7HjRhtZiRlqIpuNDA8/eJx/Jl7I8kVE\r\nO8TXhwGq3KH9vKH8A7+Teszz5Y+rdTHFIiNvvJqE+KoJF4RKrPBZNsXJroLk\r\nufxvjDdj3e9F2n/+azVr/0o3rGPK4UF5D0w+eyvcT+jEs+w9hcOet24Xxpwp\r\nXQtAXMv1AbvCtrTmgiTO12KIMVV4Hnyl7ZUra+ZAHe/DGTHxxJgjAi12HdX/\r\nKgM7nHipsHTBXN3aXMb/HPbWsUt8ajZjkpoIYQ/t9HyFhAnk6LEG4cpqNQpe\r\n9LYc0YbVvuVtqS6s3/xW9f/G1Aogwhjj/K0=\r\n=1LFB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9c35ddceebdb0fd84dc769c344e58d2e468e9085_1651127517355_0.7132991973935354"},"_hasShrinkwrap":false},"0.0.0-e75d5c612d7c198403da8cb6825d3b585983f418":{"name":"react-image","version":"0.0.0-e75d5c612d7c198403da8cb6825d3b585983f418","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.8","@types/react-dom":"18.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.0","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.9","typescript":"4.6.3","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e75d5c612d7c198403da8cb6825d3b585983f418","_id":"react-image@0.0.0-e75d5c612d7c198403da8cb6825d3b585983f418","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-K7Rn4vKBISkkDTzvaP7i+oNG3bHLn5Xe2JMAiJM1DouYSmtmE67qzUD5eHYFFb5W7mZS4Y2q62AFqie3TEX2gg==","shasum":"825913ea760cbd3206dd2efc98b7326a33905a56","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e75d5c612d7c198403da8cb6825d3b585983f418.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVBwKdME+eiyK/jShNz4VYUKKJ5DT62vxSLo+TKj1xBAiEAl6cU+LSepokSV4STX4bQ3LIPetNjVQkVxvzcIra7cnY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiajWhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6BxAAoR0Bs4/7e9mmGLAHhCx+4c4rteGSk06hJ/ID212mjYTlBbcv\r\n9KN46vXin2dVSF1gfsfQH8hGD4caFcFgi/wnsPUiKJeH4hws03UhDgBJ541Z\r\nXdPU+25B0szjDHHJUEvJtVEEOWkpaiKg8J2iph9jD+GGcBvGUamvWaRvtLpY\r\ncv6VM46ZDbnA1+VI+lVNcKh7MD/xDlqVLQT2VnNEvgj9jKiS89aNP3NKYc//\r\nOBKkcDFDe7ZpKh/hFh8jo8hA8tpv3Th+hHLaIyj5Srr15ZbDvUbeLqcPkDfG\r\nFTU0sOZ+U5exD7+G261+/+QE9R+drNyIKxT89rxDeTtYUmsDhjAYMzZLRptb\r\nQ+OjvR7XxptWbrUgyCOs+uBRuo8kNNQBhZDiaDHlm0zgm8psUZFdu4a1jsgv\r\naXhEx27BAz8sf647dp5s4883G4cebv19EemEsUEbvpJdbsiArQvZzML+b8ZL\r\nMpi1SPxzdLP/1FKEXf3bjzH40l1zBIXtx8cox3ZxFA+YHfGewgLry2Ici1nq\r\nQunPRhZ8WYanu2G+2r3lDUSMxz3Ls7+xTpYK+NC7zDuaa7BuT1rBaJIl4w1h\r\nMREF+GzxHcvEZG7ZnEU88IdqGLgXnIkw9LBWeGoSxOqtKZ8V2WZ5wWkLucSu\r\nJ80wGATKLea+YezQl0IElGL52h+kjmHTtsM=\r\n=zq3a\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e75d5c612d7c198403da8cb6825d3b585983f418_1651127712931_0.1855687654479099"},"_hasShrinkwrap":false},"0.0.0-6f95973f787e4ebedee25f56c047c259a06b12d9":{"name":"react-image","version":"0.0.0-6f95973f787e4ebedee25f56c047c259a06b12d9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.8","@types/react-dom":"18.0.2","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.0","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.9","typescript":"4.6.4","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6f95973f787e4ebedee25f56c047c259a06b12d9","_id":"react-image@0.0.0-6f95973f787e4ebedee25f56c047c259a06b12d9","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-nhyLz2ZpJKeETfFuXhexZxPFhuy9yhDWswqPzOT6ETuETkMdn2Dd/P89Nin/4ukhQDmXH93ohtmy3/U04qtSUw==","shasum":"9f162d9259ecd407a0ed008ac684ff4733933c29","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6f95973f787e4ebedee25f56c047c259a06b12d9.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV9/gnKlQrUyyKnZ1ryWC9R/wmhmqj6FrRtMo91BRM1wIgPgWWQbpYXOuFc8s/JVlE1B/OPspNjxdF8ZlZPHlCKSo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibKIgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou6A/7BIjKJk6P+5VZiHxCoS0iEvQ9pkUCY3TH/r8mDJifrBf6QsKw\r\nicob5nDY2akZu5QcsuqEmorEZw7TtULu5k/HTew8tawsEp0F9I0NlcXxJ4w4\r\nbNDXuFnzPfRfgDm7raBKGOiBMUtGQj06IvOEMSoGF46dObm9cw4xC6Dvf98B\r\nDXG9afetd4XyP7TxmVRTS/Faf7hVCqTxDW4pKiRGS+HkyLvlY5HaRrzYGfYM\r\nvnMZI1bVUxws3agZrmjL612JkwAhvhjMxHMjqEjuD1gbWUpA9Yr+I9IFzrpx\r\ngDdFsft1Cg8f7UyFMyfDAmp2tDduRv6XNiGgr0kcAmQHceClEBLpSOfxmRNA\r\nt1KYWIMQaSQKDhJusyuMUTGr2AKoQqUFpMRquxgv0FXfJYIJ8s0ho9V23vVZ\r\nPPazNw9o/i2H+Xzgf/z7SiZTmQY45dgF4f9L7kHPdtZiLmYEmZGYpKwgGtS2\r\n++Zr/rLnAwnqbd8SI1ug5Gpp5w6rJ/XKD/o+B8ICabSDwNKZIHbesidcfYav\r\nb5kO9M6VmNogLPfU6BjyUbcjIInyCEMqzgZ5e7yTny6H0yRVvDiffWQu0VP2\r\nhGyD8Xi379FPrQttwCe8PoUaNyFUiGkImXMQrounl9PXrXQ4gDQp3uyV+Hr6\r\np/mvc8WtX4IfcxSfFICFuQb3nlWHmiGVvtA=\r\n=anjQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6f95973f787e4ebedee25f56c047c259a06b12d9_1651286560624_0.8604249143920344"},"_hasShrinkwrap":false},"0.0.0-d99416d706fcc3c68793fa3a004bf3796aec9095":{"name":"react-image","version":"0.0.0-d99416d706fcc3c68793fa3a004bf3796aec9095","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.0","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.8","@types/react-dom":"18.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.0","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.9","typescript":"4.6.4","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d99416d706fcc3c68793fa3a004bf3796aec9095","_id":"react-image@0.0.0-d99416d706fcc3c68793fa3a004bf3796aec9095","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-zRNAUfiAYFoaEWRlmYCi6b1ky31pvsP7MswgKViox076xd6S8cakAA6N60cytrBXHpqCDQvcK5LfZAERI75foQ==","shasum":"d75957d60c698ef7dd9618b5690af6b0b6dd4940","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d99416d706fcc3c68793fa3a004bf3796aec9095.tgz","fileCount":20,"unpackedSize":40441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHPann81t49Qqd7Bp58qTxpJdXn6q6RZlmtAt6JXQf1xAiEA+oWVI2lsGQGKNplN+ig+Vh076ZRK7u/8gIG4AcvYwR8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibKLSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkHA//TD7bqlQ3pTRFYhn05Q4IGUGrs3UgxMbQe66Z/jji6kz9fNda\r\nnh3wO8TltRUEhhD0Fd8YTrLHVSJMATMoE9uCIR3KCTv+ngHcY5pvnxpU+ZGq\r\n2/uCosAJ+wVt74qVAcjwiFSSivv4vksxtcSeQZWCgaM++9JOV+BuDjDAzWuZ\r\nZP33gvTv7YREfwUig9xFv4JJXGR0DKb57iCTgKHdddkcXPRji5RKWc5rxRsR\r\nF3YiDZQ7TlqH01nyZ+Xybg/3086jMuV705own1w7oLWJkA4XKwK5DytPOSX8\r\nLOHMcKKEpTrf1NVdYwnyDD0mwqCtvCLBDU74GOrkCjJsPFEpYaO65o26hhji\r\n3U1sdwxA5YubqKaXjZjN/V/SaR4CjijzZiankzldx+N8vTioU9/ZFotvUJS3\r\nEIBlqmh8MTFKW2SGVNmEBjDT4yl3TymMFPRN6QNQA+VKXnLJV8Cz/kZCwE9H\r\nmOX4WTuUYHIRqq88FnxcbHkb4vlZRZyb8IaSxs6+QBwr3iplbPUCZ7vHdxcV\r\nAITLCLBUEjfe5+Z5gWDZPpWrH8dNYBLySRpZPKn8r+YusMLVsKlKG/QpGYj1\r\nMDiMApTP0ABJqLl97DBNBoPi6+o8vBTv5wpPbOTAnDLjzW3Exstx5929685s\r\ntD3fIs/uN2dUBt5JDN39Sa9LQgBNuFUhCZE=\r\n=vRcM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d99416d706fcc3c68793fa3a004bf3796aec9095_1651286738108_0.4584868894440337"},"_hasShrinkwrap":false},"0.0.0-06fc463345cc4a5d38d86e36206ab17cc5bd097a":{"name":"react-image","version":"0.0.0-06fc463345cc4a5d38d86e36206ab17cc5bd097a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.10","@babel/core":"7.17.10","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.10","@babel/preset-env":"7.17.10","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.8","@types/react-dom":"18.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.0","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.9","typescript":"4.6.4","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"06fc463345cc4a5d38d86e36206ab17cc5bd097a","_id":"react-image@0.0.0-06fc463345cc4a5d38d86e36206ab17cc5bd097a","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-yqpFuSGEKjynpe1pO5xY4X/UIxo+xHkt2lNuye75ihhnOaTMLf6IRKMsz5w/DQu+5YQKHMGjzNb+sukgBR/M7w==","shasum":"3e4859f1d6161268fb22d1094ac624d4435566ce","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-06fc463345cc4a5d38d86e36206ab17cc5bd097a.tgz","fileCount":20,"unpackedSize":40444,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPdgYaNK0+pmQ1F4vWUQUfh1I0U9LIZAlRkCq8C5oawAiArktcDGAY6LOzTwiMipYI/Ayger+G7rIXuqUn8V0eBPg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibiZgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlwg//Xzsrojc1rc6nTWnCvHS5EJ6+Fvok/C/wARPHcweXvTquHVF2\r\n6ycoXew2zQXUlvSP6U7pLxZbg9f9ei2YP4o858+QOhbSD04FxNttJxL8/S5y\r\n/tjce/rT6F/t2Rt4AW3XpXLhFY5jwiPi7INFEDMJu/VVUT+EZh4Xbb/rQMGv\r\nTVVKOD7snHg0cMHqN48uLSfwH4TlJI8k15FLS2r4aqjblPvPvbcpIRM/+0vs\r\n+KQe7QwE1ITiJAEhETPjUwpAv58WUHzDf0iqEq1bce5+qY8TQ8cR09Z1/CUj\r\nQF/mnWjJXgY08Au3cWq0fvc6x3RBv4FR+X/M9h0HAAgfAcxXiEjHQAZ7rhxZ\r\nI9BMQmW3d1AU4Q70nQnzG6o8f7FU8pYcX8FHKMmOQgiyjkghuxUXOkZDQY8q\r\nQBUs5wsgWj52eHc+N/dacAIVtDl65FcnnbOLpWUK3hkrw4dwmg0mf9Y6xzzj\r\ndxg19SfqS1Su3NdrKDpnBrhVCuyOoJWzU9nQLgoURLDQX5c+W3H7C5rkQzI1\r\nCZsk48ruSCmWceA8TMHzW3gXU7P3QADzTP0Q0aVP9up6QQd6cjhXGG9l4OZK\r\nIGtcaaDLCeO1xztGk+wxiHDM3OvHszs7s7vtJ5U1yRnFSV9q9em8hdAcFwYT\r\nHAh5JaNnMfQ5IMgXpGaafgbVeokwwWYnnpg=\r\n=Blrw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-06fc463345cc4a5d38d86e36206ab17cc5bd097a_1651385952483_0.6693428500506202"},"_hasShrinkwrap":false},"0.0.0-8af6d8cd2cbc45a1dfb5be2e3c65a78ac095bc85":{"name":"react-image","version":"0.0.0-8af6d8cd2cbc45a1dfb5be2e3c65a78ac095bc85","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.10","@babel/core":"7.17.10","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.10","@babel/preset-env":"7.17.10","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.8","@types/react-dom":"18.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.70.2","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.9","typescript":"4.6.4","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"8af6d8cd2cbc45a1dfb5be2e3c65a78ac095bc85","_id":"react-image@0.0.0-8af6d8cd2cbc45a1dfb5be2e3c65a78ac095bc85","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-C0foQV6OrTZ3kq94citpVuLbPfPGVyhARt3S4eUSYoR7yLCOYYB9kbCwE5LUUlAnDBaznlNkSmutr+HMN9PJ0Q==","shasum":"f7aa533f46c6f2ee874fd98c1cd95d42411c8f0a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-8af6d8cd2cbc45a1dfb5be2e3c65a78ac095bc85.tgz","fileCount":20,"unpackedSize":40444,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmE9gDdZ7R6+sH28f8Cry+ANi69nUqFsd78Z0B4JPIaAiEAxENDmx4oN0BRIfX1hrL0K2WtWyjX3cHmmxYEAqebB+M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibicMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnQg/+NloExyyHqQbTu/eO1cK75NzMB1ZzSVqfEBj9Vhs7IZj3tgXx\r\nUrK6dj3aaewpOI3MyDN5rTOLJKuiAzPaaSpZFZwrK+2H1Rdu4fuPX3ruZ+oi\r\nQ5EB4Tt3kFY3gnvVEVcgW9ArJ6cDpGx5cE0gjvKEtqUgdMTad9XNM2IvgV1Q\r\nxnoBaH0ycXFQbzqGUG46lKWY2Dc3v58yPVLlEwIWBgIFXiYSFytMgOzMHQ1j\r\nshJsE/a4SrHFHJMdiTvjoepiLjankeSorc+MhPSW1xm2SHHC4XddtRg2Jc8U\r\nsUPqB0FwvKuPHd2nmRvyL521gZpE1Ns8K62gVwqKTAWyJAoD+aXptkQ8yWqr\r\nUO8SPI/f+SAad1x2cOQUpIuZ2JQeopAIY7uqMxQf1wuXw1xS0i+Mx1UqBaL6\r\nn1t7mM3w5+YkDKoov0lmNx1fLd5yy7/SNwRDqcHDYnCtt62Ru3E7kUFgwkDv\r\nmaANGtDV9VXoSufvBn24wLKr7ELlJ9GijzQ9QDzIsHfqQKMg/5ZmXycJi9xJ\r\n8hhahOI2jdkaIEXFn/CkrJJB/12DKj0VKbqdKPYCKkE7jVt40VA+0kItD7aL\r\nSlqx4gcyryAP3v3Yvwf7Hs+0jkuXZpyOSSQmst/a/X++iKGAwr9G2jg8FmFM\r\nSCBzhIsvviUznWWr7h0pB2w/pbq2l3Hwol8=\r\n=DvXc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-8af6d8cd2cbc45a1dfb5be2e3c65a78ac095bc85_1651386124024_0.5867827329403477"},"_hasShrinkwrap":false},"0.0.0-85f8a88faf02ae4851d2a49c70663f61eaaae52f":{"name":"react-image","version":"0.0.0-85f8a88faf02ae4851d2a49c70663f61eaaae52f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.10","@babel/core":"7.17.10","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.10","@babel/preset-env":"7.17.10","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.8","@types/react-dom":"18.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.71.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.2.9","typescript":"4.6.4","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"85f8a88faf02ae4851d2a49c70663f61eaaae52f","_id":"react-image@0.0.0-85f8a88faf02ae4851d2a49c70663f61eaaae52f","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-vffPgfPyIFSDgoarR54hOT5Fzud0w4bhNR/la6Ni1yWyBPF+nPNPh/EaIEVYwF4oLueY/VOhwxZGOj7yQZfbgQ==","shasum":"6281d654a03f0fdba0cf45f1f96d5551f008bee5","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-85f8a88faf02ae4851d2a49c70663f61eaaae52f.tgz","fileCount":20,"unpackedSize":40444,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC20Sb64Drdy2f8VzXA3V+juKrO+9d+vqOZKIQrKA1TNAIgLBJhaf/+MZgZZt5aCCmzhVSYAJwKuEWOzCjwFPg7m+o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJib+jcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSGw/+OSmJoxGxqxtc6+X5uRHgAl+Nk/VYlMio9N9TCEwGJmS6Fi4s\r\npCLLfdTCRV3fUzL5Wrf2Ril8nxvd6wFIdMYgIvFghhK4VzwmJLxMzAZjDD3t\r\nPyuh3vfwWAFH6Ex+a+4lmrVQCHLoo3oztp1tGDShm9fsJe2dnrhRY21c+n7K\r\na4at8sO+syKXKYyuMIDlXZ2RPIr09E0cTehSEss8G5PiUG7nQBzctFb6CMiX\r\n+POECUDV6D2BuU2CVHAJsdKZtedPLmjeRwuVVkRvALXdu2liVkx3plMOioDW\r\nqDOcPN0ps/34rG3OFRQ81HuC+nFkpsqk8QfQ0xrb7WwlxGSBxJWYS+Rqbmse\r\nFcCHg5o7D19KzvzGjKa2dZhvyz/6xVTx3gbqgnk/X5UXz5QZDFL3ZcMpOLN8\r\n1lrJwPc/C5PtDATrvAKID54ouoCs10Kd8ChNYLwCeFRLlr9XY+DAVdIig+z1\r\ntAG1mmX9sicpawU77s90vtRkevH4RxY8f1NIfx1RLWFEjlxQQmKsPPBIPssc\r\nKCwFKyuN99q6wGZTNEJLr8BydCuB32ZwGKb5LyVzS/1hNEyz1p5JhqY3t4X/\r\nYbDWXYL1NYa6IgCYW/6rWGDHyGvERlcmkcZL8a6o12iZ44a2h5f5nifwasIC\r\nOpmR9vAEnN32nruM1My7ogo7udltQu9F6UI=\r\n=BUOX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-85f8a88faf02ae4851d2a49c70663f61eaaae52f_1651501276582_0.4517043265411631"},"_hasShrinkwrap":false},"0.0.0-75c149c864a16cd59bd33970a693f7df4eeada14":{"name":"react-image","version":"0.0.0-75c149c864a16cd59bd33970a693f7df4eeada14","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.17.10","@babel/core":"7.17.10","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-object-rest-spread":"7.17.3","@babel/plugin-transform-runtime":"7.17.10","@babel/preset-env":"7.17.10","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@babel/runtime":"7.17.9","@testing-library/react":"12.1.5","@types/jest":"27.4.1","@types/react":"18.0.8","@types/react-dom":"18.0.3","babel-core":"7.0.0-bridge.0","babel-jest":"27.5.1","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.3","codecov":"3.8.3","commander":"9.2.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.6.2","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.71.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"27.1.4","ts-loader":"9.3.0","typescript":"4.6.4","webpack":"5.72.0","webpack-cli":"4.9.2","webpack-dev-server":"4.8.1"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"75c149c864a16cd59bd33970a693f7df4eeada14","_id":"react-image@0.0.0-75c149c864a16cd59bd33970a693f7df4eeada14","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-2OygVGISb3TNB8n/Cs4ig2GQ5bacrfGpD36H3NEiVVMuPaQJSPLseL5PuPIm52iTlTe8KhjjhoiOcOeXPj49fQ==","shasum":"4d2fc109dbd95c99d0d7cd8099a59f9f775f76ba","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-75c149c864a16cd59bd33970a693f7df4eeada14.tgz","fileCount":20,"unpackedSize":40444,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtzgQwf0frwcPleQbLtl2T31I2QWwrweNRAvx1KECNGgIhALY7j88mIoYCl0Fuc8GNSmeJd/MCM3uUPAdtAPvuzQAx"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJib+mBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxgA/8D/HbQaQF/1xwSpS4rxUFodBmk/XmlszWxQDGfBUBGR9Rqsbb\r\n4ZPFuxXTRK6WZYM1bmmdDFmpF5vlvZEu3gMnyI7OeHVQldtifzrhNcyiATGT\r\nAOGxhNDvtEdNM45uf+mzDhiYE0ykR0hKJ7Lkl0MwUep6BtAivzvcRNhq+k9O\r\nuBwJEL8b3ZY38oJAKbqV0QJDsTktc9kw35vgxGORZYFyDog+UlJposQxRfhI\r\ngLmSckuVhd3UuEY3vG3dbfJiZR63RbCM3gkOdasdrEvWfE/jqWcQgM81vRKA\r\n2NhEv2yNlwJWZDAWt8d4XstLJPB/vyCZIKkJcA8V08RNwIp2/6YjDSE8zbYg\r\n71h6FZ8cfBak03cMNM78LJAiBVkAfZx+81jPPhqaHgvX7r/RX6TN2vrYPD4Q\r\nZowW9vQA7c6hiTncXpJEUcpXIPnl0S7jrdf+nI0sLrTet5Fk9j08FRJq6TtI\r\nz55v1/VYQ9pANbgf8+W/+YAeuVnpAVvHz3vlQLcoRlG5eJA7/OVySuSbyMtn\r\nNB53qt9hTn2VGoR8CN8/Q3hTU/a7av5x/ykAGHM9ebbfWI/oFjCqlj5om6kL\r\n1Fz0utFHGdb3OkRpDMz0sqFOkYvlNdUM9CbTGRIxQicDHqdgUm9Pe6ZtYzks\r\n5ha2+9V3LT79f8pzDuyTM+rTTBBqQERI2D0=\r\n=WKyb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-75c149c864a16cd59bd33970a693f7df4eeada14_1651501441565_0.32421171640802204"},"_hasShrinkwrap":false},"0.0.0-9844680435701316e397239a4cfc7c82f6bfd208":{"name":"react-image","version":"0.0.0-9844680435701316e397239a4cfc7c82f6bfd208","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"12.1.5","@types/jest":"28.1.4","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"28.1.2","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"27.5.1","prettier":"2.7.1","react":"17.0.2","react-css-transition-replace":"4.0.5","react-dom":"17.0.2","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"28.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","@babel/runtime":">=7"},"dependencies":{},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"9844680435701316e397239a4cfc7c82f6bfd208","_id":"react-image@0.0.0-9844680435701316e397239a4cfc7c82f6bfd208","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-TO07gfcaFcIU1s+SX2nJLG22sauEP4GFEcV5LWO/hL8QLxkmsOMJEsUd9qFZ1Jcv422miIUV2k989Z9ZL4vQZg==","shasum":"ca0bf0301cfe900705cb7d0da3c1f6a49061c428","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-9844680435701316e397239a4cfc7c82f6bfd208.tgz","fileCount":20,"unpackedSize":40326,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa/MOc9DX2L6dYgTV3SPLeuogXzl91FZwdRVJXbW50uQIgYQwyT13vaWC6eF9T834purYB+RD3dJIj0kDLCI4qQlQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkB2+7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLUQ/+PDp/dPzVpz4orNMpS5QOBwjN27CfASHgfJ1mTtOQIIctyGnL\r\n3H3ml4CPeJRXX1YSXT5YLOivBgJB+ixlq9UwyoGrVuivxOKnZaoxWwfuSShk\r\nVm3bpHsbYk5MJfqQnQ2OK1KTDCtlEoOPr4M7LaxyDaRVe8rfxsEvaE2xhxF1\r\n7P8Gh6WW2CYUyYwgNCEjKWPDpy56F6gmX0Uv9uzoc+NdvEdpq+7orXc523cc\r\nkknsI0qCYSHuW2KSw4F8sYju9ddsAUVO3oWSr1z33yf22CydsZa+RzNQ7vB+\r\nYzg+uNz2XpjsQ32MZGd9l+uK7j/GKxPdoWabHduUaOLBdKJFyk8qMmfCSM0k\r\n3qCxj5lOnepfmalSic1sgDu1bxYH2DzWKkcyqB5CtEjboBUtmv455haKdhEL\r\nuDffB4TrxGl1hshjs/1b9iFd6ijqWJDjSCw8sZSZJTGU9jGLWDhcuH/OWPRP\r\nwOBc+kX+jXV/dxC5uonxdknw4EWyzsgfPj11HpmATa36sPB9HT94CUKep65d\r\nXbnwdPEvZNA5Vs0bn9r5s4m3aRyR6npf6I6wmc9zX4c+oahm+32lAr2Q5kxB\r\nqm/4ltv64USowtSRk8G4HpuFs/Hu3JmQRQbav18h8jNToz7d4HwrZx1SRBXh\r\n2tTD0dqm5tSSY1oMDIpNTxPoVvJ7FdRIPyc=\r\n=FgIG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-9844680435701316e397239a4cfc7c82f6bfd208_1678208955075_0.21025875074239653"},"_hasShrinkwrap":false},"0.0.0-3e088c3494d991cfef11d13df06c9de990445785":{"name":"react-image","version":"0.0.0-3e088c3494d991cfef11d13df06c9de990445785","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.4","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"dependencies":{"jest-environment-jsdom":"^29.5.0"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3e088c3494d991cfef11d13df06c9de990445785","_id":"react-image@0.0.0-3e088c3494d991cfef11d13df06c9de990445785","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-WTiDfLGamnwDEznrjVZxRQ1KFYL/4xAP6FiEcOePAW8577HnGA6Yacnycqj8hs2YAzB7KKT02gC/hJnwD2+Mcw==","shasum":"4e27292ee82c114ac4b1db5386e2f76a9cfcc692","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3e088c3494d991cfef11d13df06c9de990445785.tgz","fileCount":20,"unpackedSize":40346,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICycj4cbcKfFel21TFbFjpiWFhR+TnvbemD2EoZB+uChAiEAwxdBAknBOE5A+Wa+3t9vxtz6f7uTeFvkHqMV5T0rDZA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkB3GsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDFQ//b/yTB/LUmdu1S34Iv4Is2c4LlbNOilqzQH9wNGyU7J0XjoM6\r\nOZsGHqhidbB36BudYY417nfaXjoPWIC7PWcuZQxkAHznrqtB27cKctyqdQpE\r\n1a0gFnONlXwfWS94RxmwuXV+3dWY7LHjjRtSJVgHA80MhlEfJIynKXw6kqbX\r\nQf23f375RWvV1g5zzUBtF2XEg52mMXafA1JMzew/Tj/fcdhkedVuZzhCF8CD\r\nouANqe+l5q6hxlUR+p7JCT/qm6+3CUFvr4Fu0kY/PBH0NFQ26mModwPBBKIT\r\n4PYz397EMd69tRTfxbcdVW4/v6g6L8ODByc8U8WhTV38IolU6FXS7DFph3cm\r\niANIgwZ+k8y3LY106D8YebPDgbtHj3QK1J89zcMQxxeemIOevsKGLS7bCE8M\r\nDz2HsB5uQpPiamfz0cbJWzyd5/Ioc/QK+VIcL3HOOrYhVRboFGT1JgkNSY/Y\r\n+mp6ZObJWGW6FV/ODDivqo3+7exn0agOec/Ig+vAZH7b+N4K23zRK7Bh/kyE\r\nUvtGELwm1bUH1bLIfeUp0/nm01Dx5wzv5qLofMAj/yULVAHVuF6YzwovyqIS\r\nsu4gYHW//AAQKSCSjjXm6d4zyM4cMhw2hh5BuWZ836Z6tP37AD2JJQ38byud\r\nVhNVb6V1P6V+x0edRj9t+aBL+K//dlUYZA0=\r\n=c7LR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3e088c3494d991cfef11d13df06c9de990445785_1678209452394_0.7665496391970681"},"_hasShrinkwrap":false},"0.0.0-c47ea58a7c281cbab29f3272c0a4d4c58dc2aaa7":{"name":"react-image","version":"0.0.0-c47ea58a7c281cbab29f3272c0a4d4c58dc2aaa7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.4","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"dependencies":{"jest-environment-jsdom":"^29.5.0"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c47ea58a7c281cbab29f3272c0a4d4c58dc2aaa7","_id":"react-image@0.0.0-c47ea58a7c281cbab29f3272c0a4d4c58dc2aaa7","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-uuJWirlRTaQn6PWa2Q72Pt/nnMrvBLqWUbkbPhlHwuA8duBvfhlsVH1lLox+kAcCGFWOm2I0ItxP8CpGjPMo6Q==","shasum":"b25ecc1b2b27c33fc1c223b9b4b74dc0714d374e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c47ea58a7c281cbab29f3272c0a4d4c58dc2aaa7.tgz","fileCount":20,"unpackedSize":40346,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdHCkVgmCG9L6gju1cvLzlts9c/r6aMxR0MsOMcG/qMQIhANMQPFXkekSSGwm37o2xg4yCRnYNA/jjzA7eM8gDkzDY"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCGxUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohAQ//RXqeiywihMcQ/qmoX+k9Bd3y/dvxKeNyxZL8MEUMMFOeaLYL\r\nrzdRJpRZdVZcjMbtQpAV5P1yi7rRl9T/WuQT2sZVFFnpVR9sh38BOMFyGlXj\r\nAU3z42WpA28yJ5PQ89zaR4A/HVZDeLXx7LHnSyZJwsiLGvNOrxo4QWYeO8QX\r\nmYsrdVnKEi5XDYpmeq97abcojXFDDOq1d6wONoBSsmeWW3SWIDddl06vKUJg\r\n9+UU5jvo6eGcsTWFN/vwc2BAOmg2mne26168esI5vgKOAG/QhwowZ5kx6nYa\r\nA27WpPslmB2qubnvEiGQKsTwBStlcau3bRXL22J5BpwFxuPBccGc8QkZShM0\r\n8+IoTkyiNgdfia3DnkVwYmjIaBNCL/RTrE5dfxl+tOaFVaoNwef5Z1V8l7aX\r\nNWNYS/Q7TiaRvn2Tax1KsRJ/DHN8BZAPWimHdecud8F157xik2RNtAZvxEcL\r\nJYvK00L7kc5WMw6FxCca8wRQLJOERFAszehPsdoJPWBJBs3YGsJvOCzxcG5T\r\nmKI8s4N+OiybQPO0owWjE6jg4SGTnUeXEPDjNMmB6wJFzYVz8W23MMs0Vnct\r\nHkPiv0YRQ2SUtXZkevyfbNN+fhYeusAjdMaGWX4zJkjLrDBR+9fGS8dJ5Ha2\r\nZz56fiDtpGGFL3zYSOZduoumKUMIJhY8e3c=\r\n=f9xh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c47ea58a7c281cbab29f3272c0a4d4c58dc2aaa7_1678273620368_0.9275707123374959"},"_hasShrinkwrap":false},"4.1.0":{"name":"react-image","version":"4.1.0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.4","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"gitHead":"d5904ec0b52f96a4d10e6fe044350061fdd80f6d","_id":"react-image@4.1.0","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==","shasum":"92f2d4a809a178b3bf69acd7bad7da7aa5e7364c","tarball":"https://registry.npmjs.org/react-image/-/react-image-4.1.0.tgz","fileCount":20,"unpackedSize":40280,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE80Y1lPG3N+qI+hUg8uHHEdwXTEVWU3/D5Y2Dvrz7srAiEAp4Np8U5YHybe/MeRO7BRlfQimb7bU4tookpnftV3BhA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCvSDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrohw//U6YdD6ivRd9O1cvpAL8V32gNLM2ZPfM6hdHQa0f8pyXA/PrP\r\n2qcTQZQ6u35fmz5q7GBRVPVNTDFqpmCsEo1i0TWSdJAzyLoBN62XMy7KSJcg\r\nRuvhEDXFf7Sioke80+15ySqol8pNXjtSyRJXB9xQ94WyM4+jJ+bXrK7yxane\r\n/ojwn0UO5P05x688CpxGtH2IpmOEDpuKaDVKc0+3D2xzwukcvz1D00S+lYSn\r\njCwhjO30vbmyqOHDzO7idweMUJV+a85VIjnInJ9KUssi+ANQXR4kyVr3MIJB\r\nGfEfpe3XRa4jC5Pe+EylEjl1QmnMej9vpbGW8pa5BZ0I609rhRlnMRmGLktt\r\nEgGHO++bvp4X66zP24lTI+aeUas5HShIEBzOoCI0aub9SrtYHURrvWCsbBLW\r\nYFA4hvVYoZgbUagWtUO8E0a+nx+dB/RFBQsNAupM7Pvh8DEmyAij854UGAFA\r\nqBC3xSt3p0DA5fRAONGCAoD21LlIWfUx7seFv8GYCzfnOwV8lJWeuCs9cEZx\r\nB/+6U0jM0QLDB1uuwKhdIVf5jTO6ige2Fdjqr/7NHRb1o8Katk62meQB1jUw\r\nJDZWntRpkP/twl4gE7YYYgcPBhbZL5aXakwKiH9k2K2tFssvvDpoRfBhrRYL\r\nl7jpnIZaQAF0YKF0uhXKLl9g2PxGRInDPbY=\r\n=PDXZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_4.1.0_1678439555557_0.9283108659798909"},"_hasShrinkwrap":false},"0.0.0-d5904ec0b52f96a4d10e6fe044350061fdd80f6d":{"name":"react-image","version":"0.0.0-d5904ec0b52f96a4d10e6fe044350061fdd80f6d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.4","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d5904ec0b52f96a4d10e6fe044350061fdd80f6d","_id":"react-image@0.0.0-d5904ec0b52f96a4d10e6fe044350061fdd80f6d","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-0byhpfyhzsojthMntjQTliYl30mUWAQCdKDXtTHJTsCNzJ55CJ1pkMzEW5cWCVxHtngqw/wIExDWUBR6yP4lYA==","shasum":"ebf0ddc1be3b423a5906b9bba7562041e2e7293e","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d5904ec0b52f96a4d10e6fe044350061fdd80f6d.tgz","fileCount":20,"unpackedSize":40321,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkvj6dzpjQVf5PQoVr7zrxa0bNd/qahz5cq93EGo43EQIgBwgNpEpXD400ysMf843l6UV1Agrsamq3q4G29bcjLWI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCvSLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUvQ//Y38v0yx3u+N9TJ67qq0/IUdnmP6ORZ1P3qm6pCBq+oK5nM62\r\no9NL6SdIPOfsteE5vbtf7tzdJq30Ylu7XQ+vNAannSbPctI9RStgpDyZTw+M\r\nX1G8MUFY9m96YHAyhx4wDyLxZIRM45ho263S9KemO1FbkyGTyv9vAuqYlMQd\r\ngIwxCn1n3jgfRAsdPMwCsG3UWTyr081ksdSU3dU0+z5pQhjrJ95wAdVtq5d3\r\nGbSjpbRglBqBQyWghqPDPTvM4MTxQ1MwuDhynkymbbQY+D1xuA9adIBgMXDt\r\neXhpL/FiIzhp+0EWdd8p0yRpiQYCbEBRiC9X3vi1kz94MOIiLGS5NYztJEX0\r\npRFd0UHsqNanRaeVzzdU1JXHHjFsrPo9lAIHb6NFOZFSdPuUzsVcAnSPPj6l\r\nF8zOJb/Fw9gROv9d6YoXjgO66im9X6n0gbyuMJNLdTenvXc60GdtxKumUW8i\r\nROtM8ST2YBt6zBLQoDZ69anUBd6F5h7x76/FUrjI9ytVLHBG8879BO8k+ngV\r\nqqp94a6ShGVtXsq6giA54dkCJwokoTfRcsJlVGfS8PIYkrgNLibjc7IDzeh7\r\nq1eFQ/Eyb5tBwlhTL2XWmhyAlF+7MOmgvXuklpHsF1Sq/46H6lQ+zu6V0wCM\r\nqYKipegWH6k+DBeIgTyL4pmpd312LCqDdXQ=\r\n=2Ikp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d5904ec0b52f96a4d10e6fe044350061fdd80f6d_1678439563092_0.6855399940697597"},"_hasShrinkwrap":false},"0.0.0-a57bc749c4e226a3fdbdba06656aeb6c1cd78043":{"name":"react-image","version":"0.0.0-a57bc749c4e226a3fdbdba06656aeb6c1cd78043","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.4","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"a57bc749c4e226a3fdbdba06656aeb6c1cd78043","_id":"react-image@0.0.0-a57bc749c4e226a3fdbdba06656aeb6c1cd78043","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-iSJ2Vwi9A5nIxpmrF+vlnPaTTyg2Y3KrPsHwYTzOTaKSUlz+ncifh5aUraV8CFbvtD9LAUNAuRRPQ4tyuoK8fg==","shasum":"2f843495a6ce0ca1c7963f25d8479b9be44f3524","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-a57bc749c4e226a3fdbdba06656aeb6c1cd78043.tgz","fileCount":20,"unpackedSize":40358,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICHk+k3lEzQJHCIhVad+s/MblaApzNSxYQXxNSVCHL7pAiBcMIE9oIhZYPsgVCnmyxRthy1hfYKZn2tc7PQbui1QVw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCvXNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvbg/+JLE6hwpQdlvessP/Pav+lc5OUBuwJWLgYgkksKSi2HpduOKp\r\nZCHzChIGjF4YNaqmLhYq5EiAllzIf+IXFdk1JU7+ocLQAZvOJw7Z+RCupyHy\r\n12Fi0pT/2H0T+merzEPpT7fh5gP/ASdpJcXS9coEa6TLeOoQzn5ZS2mXoVdi\r\nCkA557tgjs6In+y9XBwFi/qyRS9uvswOzL76uB29MFYkfY2vYQFPzhwnVwy8\r\nrOR4Obvmc6lLAVHPzypcqtVTuPJlXml0eyiwlaBQfmUiKJdgquLT3BJxZJRh\r\nNoGAx7a6ZMlTyFmJy49hpGxoQ1iIKHGgePzSLkay8yRHlBXUj32xxLwMw7Qe\r\n88p8MDzBNZrKh+vLi1l4wK7bGa/PmqKHMswwKewZzrcIlD/aVKoOS+2JhGrC\r\nXGfhzNtjzzOabWv+5f20157QiM4Zo43RgXL2yKXHoMWA5ISLP4Dvw6ZJxQ47\r\nAnzBa/hEIkGdpfMr5hFpyslgJcRleoT6kIoVvLGFxzSXtfF4MfQAtWU0vZ3W\r\n/xxaGAySmwpeVnM69Uv2UPJZuj9E6y4UCG/RL8presKG2mV08nMu7aVUVOrs\r\nEQP/8KaZlK2SdT5Xy//B5tNW6r/Rg45z/4iVh0W+rahDIlSYkFo8C2nOvrr8\r\nmyg8Scl2qNls0z7rKsd1LO1bK/CqcLZHfHM=\r\n=XM2u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-a57bc749c4e226a3fdbdba06656aeb6c1cd78043_1678439885206_0.22715965665210436"},"_hasShrinkwrap":false},"0.0.0-dc744ccb0676b4f73c14ac6bf4ccac2228b91ca9":{"name":"react-image","version":"0.0.0-dc744ccb0676b4f73c14ac6bf4ccac2228b91ca9","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.1","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"dc744ccb0676b4f73c14ac6bf4ccac2228b91ca9","_id":"react-image@0.0.0-dc744ccb0676b4f73c14ac6bf4ccac2228b91ca9","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-/qmbqq8C2n94MH7sXosHAmnbrz1v9gWKz0yPqB4kD+rlf/Ov9DMKJrpr1ncrN3mnOIsgrUwdnwR59fNmHISZCw==","shasum":"169fbe94a6826fef55640fd9704b0a7b264f0a4a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-dc744ccb0676b4f73c14ac6bf4ccac2228b91ca9.tgz","fileCount":20,"unpackedSize":40358,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGg+kmTNGWdz8FdybSwBFqJZUMFYTcmiK3oM7eBRqCj5AiBbr79oFUMhVu2ph62+1MvudMi7vB/4RfnNP6zWmN02fA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCy+XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPYA/9GzNtFEKjjnPs39yjlYucV8sfXShw7CxPwmlNn/b04vwya4S3\r\n0RijNXIo/LX9d0IFrwV4B6RXmlSytk+f4FKNChVxS5F1jt++XhnxPDDSrNos\r\nKt44StI/OHYp6XDT+9QTxElKSg0Fiz7FXwszneuQUPKBm+lCibPGtG56v6gw\r\nTgNFx4uWU2p9si+EB0KN8Zi9Pra6rKFbvq2Fb+Eph/R+HU/erKqL+MKJA4cX\r\nHvC1OlGBKdUnVdzaiq7c6LZ02Ckp6vJJuaxPNbDs+j3L3pVzsci3hvUs9Ufl\r\nLwaGjmcCBVWwd9cmvPQ3PWeDEN3XclxNZM5KeMxWz8vycD3vkrLb+brpMIWS\r\nCAj4bSpS4ktuf1g3c+u7wiPSXg2vWb/t+xqanIX3+sUWFctrl3U7yqFQy8mF\r\nFghwXwgXnGKQcLvyYU9AGDEZlYG61vxIuscUytqBLxxfD1KYSYttBJwUikTK\r\nsyR/sUTaIPomgm2e2qFlMvAzW4131CVtZLbgAyJW7QLH4OKHyUyBQG8lSrKB\r\nBS3zaT2DCcF6amWZ/2GHWEmUzO94rTH459ujqfBR51awR+rMnKChR5DeKiT6\r\ngQYi83ADT7sw+ruDzlLfiZgtuAiG4mzeD0rib4EqGQJavrirHtpfM9VRA07a\r\nA9REV4kSQhA/f0fFwIo1Y0IOfiE0UKP7Oic=\r\n=8ZNp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-dc744ccb0676b4f73c14ac6bf4ccac2228b91ca9_1678454679137_0.995487275556622"},"_hasShrinkwrap":false},"0.0.0-f4946b998f34a054fcede122c82188f34332dfc5":{"name":"react-image","version":"0.0.0-f4946b998f34a054fcede122c82188f34332dfc5","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.7","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f4946b998f34a054fcede122c82188f34332dfc5","_id":"react-image@0.0.0-f4946b998f34a054fcede122c82188f34332dfc5","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-3fMUjxSQjN4EQtwBRJYEMPUN4yF/0Yw+QnHHENdA0jdn9JK/ebUiD9RUy8HGt/SXCvsKz72VDJm072/naWEmkw==","shasum":"5a58eb1529b5d6bc1dab398704d7f79e110973f1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f4946b998f34a054fcede122c82188f34332dfc5.tgz","fileCount":20,"unpackedSize":40358,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEUSMBXn/twlv+bZo+2UVAIDRLIS9Xwk1N8KJ8C9o3sOAiAAlwXOE26Z2PT3L+PiKxrG0Z4CqjqQdJ6wm8+dW/62Kw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzFRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG5A/9EMiWqPYIwh72/FV1UroB0DyXV8G+Tw6lbP+WYQVPaJ+tAtR2\r\n3+c6apI1SK7WfQlz0oa/RY2ccdmEhNBcWEDey7yWfxGpoHRFuW4QD2rah48R\r\nie4xC4wPpoKwfybr443BsfWa+8zrbdb/JlBcAekRVCDU6AyJqUrpUFeqo+Kf\r\n3d1neFvJUXDJ5XyN7cwdIvojcEHR/GC2ouqpkCI7+LGj6zXBH5vG/RIWgWsy\r\nVPVcwtr2krH3/52I/fKqHCIxPh3qbpk3yMMgZjcsHoszZMGGRdtAkENHo++U\r\nv8J2f3O/28hZdtVcYrrDEaaSGKLIcSZQVTevKWAM+1PowUZ3KTUizJ4keDhL\r\nBGIvYX3Epeor6lC5aRhHeqRMMt35Oehsyq9ja8ZOp5Bi0BtASty04A4ukRPn\r\nx/eoPYmKlFwZ4NqhHlGheCEUyfHceDapuNjMfVgyDQPk3UhdocLSVsRevI5u\r\nn4LifZWgBh4uPwX4UHYH0kHdo8363+AuIFHNYJ7CrnWsJnT1XK5X7guYYGeo\r\n9HtewSEnyKpNugqeCq8zuq9WhlqDGnjdHlExtwkHksu6fm85snmMM37vZUH4\r\nI5pASRqS3xy5QYemMtNWcJPHo79HrCgbLv3Gd21mNn7EixtyRjm2ftIpF9Ce\r\nGYg0e5jHezlDT7D0sm8rfzkbSEd1v6bC5D4=\r\n=LsJF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f4946b998f34a054fcede122c82188f34332dfc5_1678455121382_0.9122741548987332"},"_hasShrinkwrap":false},"0.0.0-babbac2dee7588c7838fa396778732979468ab1c":{"name":"react-image","version":"0.0.0-babbac2dee7588c7838fa396778732979468ab1c","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.14","@types/react-dom":"18.0.5","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"babbac2dee7588c7838fa396778732979468ab1c","_id":"react-image@0.0.0-babbac2dee7588c7838fa396778732979468ab1c","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-2d2LKJg6o0pQkWnNJ9gDQgOgXYSVcqpLbdAWuF4TRs2kUOH2eoBOy7z4rZJ/c+GbAyGvDN7BSIqwxkmGv9A9Vw==","shasum":"96e7b1f68f20ccb11a1c7ab788fdf675fd9617dd","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-babbac2dee7588c7838fa396778732979468ab1c.tgz","fileCount":20,"unpackedSize":40358,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxe2ODj/JykWWDPDGmv007OVYbTqod1U0lfcrnhtwiuAIgb3HwW99D7XeBA3eV/hSq8sdoNYopfrbhAw1AN1JHJwE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzIoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkWg//SvPEfB3q90LrubskS+imGv2YUfq0xehl8s3Y2ESRIYy6DbP+\r\nc7nxsfreBcRgxJ2DEzkRFrKD2Lf3XrXympIX8WDNVu5DkHR5NTiw9UwerI0y\r\nbnJ1wz7lp8xWxSeRIgmxNpMwfT5NxfGUp89COKKUo4YbHvy3S4pi4X+WSWvq\r\nar9A08cnI9CHDhILbEvR+wS876NCQfUeycPTChUY6dttlF5ekkVWJk5Pp+Wl\r\nwe6n5cXmv5a2GznE7pYar4hdnA/U1x0PwLnxnTvLpWa5UXhaUqtaDuBtJG1Z\r\nGa8hvPOeV6P6DYc86gj7nP10z9t0TYAekx25hOTjgqbzBhUvmugaYMvlk24h\r\nHr/TmtSm5dkEaRLP6VjxzAWymTMmdYG2glcDEgP5nCEXbbiiLsy/FCzgKxn4\r\nQ5gEwIwe2RJao6IKVmwLXkuIMwgjgFtKYAAK9dORGY8hugrU031Dq1hoXwo3\r\nqAlhA487EmdW3fjV58Ac0JuHecNfurtU0XJCfuv7ZFwaQpYFJXYmQE4RN8aM\r\n5g8QL5XKtTjUoj7s/CZeEenZVx1brTal5WQcqxlrCYdwYbay8t8jKMgWf1mL\r\nuxIn1/rrZ2nL2B//6GUdp4WdnECvCGaHgfRME9+IZ4t4AlpwB28ciGwL5g8v\r\nCvYLvOnJt2d5lNrVZgUOr25XyrDZwzryw6E=\r\n=ib35\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-babbac2dee7588c7838fa396778732979468ab1c_1678455335836_0.4532367914747564"},"_hasShrinkwrap":false},"0.0.0-eb53a985f455ca635b9c7e6c91de6dd49feb593b":{"name":"react-image","version":"0.0.0-eb53a985f455ca635b9c7e6c91de6dd49feb593b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.18.6","@babel/core":"7.18.6","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.18.6","@babel/plugin-transform-runtime":"7.18.6","@babel/preset-env":"7.18.6","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@babel/runtime":"7.18.6","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"eb53a985f455ca635b9c7e6c91de6dd49feb593b","_id":"react-image@0.0.0-eb53a985f455ca635b9c7e6c91de6dd49feb593b","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Sb5udJcLcBwyFj4UTkFod7pzZg54BIhWs0xU8QGNo+bSTrLn7O02yFXgorlrjsl7F9tWhuh/9aNbqo+95Qhl4g==","shasum":"33edfdd202aa45cb62d6cb523a6f28e92add9a21","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-eb53a985f455ca635b9c7e6c91de6dd49feb593b.tgz","fileCount":20,"unpackedSize":40359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/Y24jAGGVAiBvtUqO5+EAbmuvdrW4fuuF6je4HyuKsQIhAJd1RxMan5KmlNBvHA65gnLwMkbDGEAsnqo3QuVuunQH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzMAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA7w//ZnzgaNONw2ccf6cV5WtEbMxCEbfLSpJu7UWYbICM2fT+mtYs\r\nl2SEMXxrNT2CI1QMKgcKXaA/Vs1AW9ktg1C2q+KTlP+plzZzsxmYAfgOY2Nd\r\nPxrLwQYsCQZ371u8DkWYGtdjJRr1DvXx/2z/AK2b9OCQ1JWpaxeHyo9d3Rb2\r\npI+btEeDn+PdanfUlydyXXQNY0mro9xrI2ngl4mLbNUASn7f0lOh+Js+xU5L\r\nXwn2lRro/15zgCmH3zbG3qjuo+ipYiG0eKx05VG/n5ZCJu8q80C0UiDjvN5E\r\noVxsMoh/KF4hVF68z937k+mFPOShMWNQBOyvdVKKm4VWMwCAN84wvr3RGXQO\r\n/zFg0903aaQgHBfLxREUg7gBFuKCDfEUPa2leB/2Y+XsZFMMCsQpQvx5W8aH\r\nowASj5de2u6u77PgQixVxBe+1uxhReM8cPSpif6bgKpis7L/wJ4Ea2N7W2t+\r\nhmen05JrKgQ0IT/HDAqRNMDLebTxLyHb7teaWXfdDStRoR7lCENze+0qs4T0\r\nOj7cZYaQMgXMP2vc81ug5SIvSIkpyOANYW7HcujjRXTisNX+AJpFXRMBHSpq\r\nHk5NQW1VtYUMxSCik7g/XTPRrYg8eiBYt5ZACFCX71MbZUVEl8+YyARxhlsi\r\nrFArgFMv5ySlwpO3ZiU7Wb8kXJFYTGSi0mo=\r\n=V/ay\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-eb53a985f455ca635b9c7e6c91de6dd49feb593b_1678455552464_0.15128243742641612"},"_hasShrinkwrap":false},"0.0.0-25c9c192400408201b32829659a27b96402c0db0":{"name":"react-image","version":"0.0.0-25c9c192400408201b32829659a27b96402c0db0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.2.5","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"25c9c192400408201b32829659a27b96402c0db0","_id":"react-image@0.0.0-25c9c192400408201b32829659a27b96402c0db0","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-wReB36MnOkSuNeAJXP7ZFckJILcHY5LOUT+0bhRrdfEtXiphE6InVjh0cbVoBbmLqm7OAXaF4be86M/r7GHajA==","shasum":"d6ad6a5e8ff963d0d2b5d5ad7e172fdfe158637c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-25c9c192400408201b32829659a27b96402c0db0.tgz","fileCount":20,"unpackedSize":40359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5Bqq8u/ZVmRITEIMOUvCbzryoK2yy7yTCgu6SQ8xNqwIgX/SwD9nb2bko2EA8WKMh2j56X89Isqd5JpVTVOHcOjk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC29PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP2g/+LKO+hfowY0TdybwnmINPaJht/2v6qk30fgFmvFO/pkNekTNd\r\nUqVuIRAOBywTE2zf3Kz2uuB9gM3XjOt39t3soxo2pq2gX43O0jIQnXjrdCio\r\nPfkE9Fg2LB0gSofwUee5fmHhP7CHqQmC3ZNs0Kh54OzmjY8jTk+oAQI81omd\r\nax+3QoWchz6APljeXg/q1SzGsyofDHgi3cr6tSJytYPnR20H1bmUZ1YX7aBp\r\n3oZsi7X25S//zqQaxEakyVWSkgQzPEV+XqSV5ksDWSBoZSVp+QV2WQuROEYn\r\nAOJZ/A1f7zdwZzL/3n6+/RiSi4Yb2mhNn8uvmj1/WKHE1mHks6OCPyO1kTZq\r\nifB3r6xc5iBq1D7hEUdbzFQCR7+ovCt9pCQynR/9YE7lfKzYbNmJS4YjwPkg\r\nP2WRzs5So/xFglX97QoGGVeWzr43FA7B30hTF59DikbJ3aUOSKlX9PRcwkTf\r\nkQMJ6ZXyNhb80NAv3OSs0CKTUI9+vPr+gINMgEC02eUOrU5EYx7QckZ9NQlz\r\nWmTMHJkDkE/LJfosLphMcS3Sipparp2kSTfeB5i4/iiBp+QQ1aDAf9f40a40\r\ndCvLJvuy1r1QLFwg0r09kdFsV035yYBRup6OZD0ecvTD8w+RBJ4ybO/xGKEX\r\nQg2MOjZnQ8WHAKpArhuLu8oZJvlMvMIm8s4=\r\n=jeBA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-25c9c192400408201b32829659a27b96402c0db0_1678470991601_0.22108195970243605"},"_hasShrinkwrap":false},"0.0.0-b393a8003983cb4a51554152ce544f00ff3e8e6b":{"name":"react-image","version":"0.0.0-b393a8003983cb4a51554152ce544f00ff3e8e6b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.3.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"b393a8003983cb4a51554152ce544f00ff3e8e6b","_id":"react-image@0.0.0-b393a8003983cb4a51554152ce544f00ff3e8e6b","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Z4+5BsCRJxWujqglaMQBbjFsVJhsxiL1EufiyN4s2IVSoNzE9LN82zK0MgHWfDsIqPK+pwl5gkkX45ufLBpZPA==","shasum":"1f82782f04fe3c4b01a3d7cf328b1ad04b41781c","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-b393a8003983cb4a51554152ce544f00ff3e8e6b.tgz","fileCount":20,"unpackedSize":40359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC45Z487lVoGQlYXeEifxR+mIMAK1WCtjx6jeIxJY5wGAiBkzxG3Oomq9b0Lv6lV5MpBLV0kvA1oN1fTmtbPUYYp9A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC3DXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgTw//VBa2LHo5cGXiP4PTvO+BRNX6n8lY+L2wwdiJsq45HDqXp+zy\r\nFUYpZAl9yjTckJ2lK7Jcal5qEEKB/+blc8Q+0i5IBMt/Jr06kVNzqWzhiarI\r\nJ88h2m6QOoeKJn5RQ+doMVMdfkymcZmC8J7BQKpLUwJigTZcVoiSxUsGBI/C\r\nENxPQAc9yAb924P46uoQx/opBp/ae2ODec1CWdneigjHMBvYQ7jE9nIvJ83e\r\nyBhmzxTuW7PXuJlq81zWJ8gD3RyhOtdTJSALod2G5GuXEVyoGdcid6jjK1I8\r\nSQUwjiKR2jd3exSeo8HOZt2wVvJU0UOE3GFjFVgnyHd2bVY3DNgJp7WLK+M/\r\nO0BMlaagK62OOs1uqUvNANt83JDJ6O3dz73j/9ZRaFXsUZ8UgjUaR6oeN423\r\n3QBxdLRuMv8cseXP+p8HtiBehO9BoQMYsaCZAHLYgmA3yYQ48dB/gKaquxZE\r\n2WcPjsvyA9jK/bYJkL/jDQMgqro5siGcgBHbIFZfGBYx1mRM3iIvhq4GZ0ac\r\n7ZsC25Ysbcot5civPwh885qz/ru+b8HYeq+mmRH6KCbtf7qSoTkAP1XF+Vuj\r\nA91TjVeqlXzyhlY0MG0mazlH/DHJPk811oak5wWIfzfXSTjf7Fx9CZbKuXJG\r\nN739XBwomwI1xvQ1P5JxBQo/MC7PJkSYf8s=\r\n=dMM9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-b393a8003983cb4a51554152ce544f00ff3e8e6b_1678471382989_0.5046836657985732"},"_hasShrinkwrap":false},"0.0.0-53f8d2295a730a5391f7071525c42440a59fcdeb":{"name":"react-image","version":"0.0.0-53f8d2295a730a5391f7071525c42440a59fcdeb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.7.1","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"53f8d2295a730a5391f7071525c42440a59fcdeb","_id":"react-image@0.0.0-53f8d2295a730a5391f7071525c42440a59fcdeb","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-bFz5F5kkufX1o2nnR5wqdvuyLVLLorreAoI9m72km+B4X5v/WPuZDGpjNa2e/jWxN+ScMGgU0clGZdbljOQwbQ==","shasum":"cd727685d07e6a47114ca940d797faaccde7d793","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-53f8d2295a730a5391f7071525c42440a59fcdeb.tgz","fileCount":20,"unpackedSize":40359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvTjeb78G7Z+1J2OgPmwtHrUI7ZL2a2ZCbNm4ZCqxr8QIgfJ9u6CwgQ+NKuGpAjAXJ/CKWDXzki956vZ6fYwvNKGU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5fIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6IxAAoz1oRvc4fz0Ee+gv75Pc7CenYUqVD+n1Zu+UoquzSWd4HSpA\r\nB83RJgbsziDekQde5HN9kLlzWW8lWbw97YG+JAgSL24tRJlebiTQ156UkIsJ\r\nk3zqMYQybPVYnr7kZRliz31qy+cXwn5BHjpFwQgxC9MWDFTuVc+LCZtK0zjS\r\njI6qO3xaoTSs4ScxeG1gZixNX7yZ2G5CimwQXYSzn6Vq44I4OJwpQcub/0yc\r\ngoAHYT8xs51Ls6nRiooODJpbsGZC6C9KPoL/O47qPkVpHq84sLROronHmM6q\r\nh4Iiq/1dsSjGblpBPkJ4gQ8GVQZC36hNcVIs6JhOqOaBy7k/hEod2+gaDWZN\r\nIPMKtHqRfqEZSztraieHc5jqgebWFXM6MvtPZPOn7ZHuhWV/WPGfVs2HwpiE\r\naox02SwflT42gFyArjF0232TFGvcpPhzSdnd6uVVTf5egldKNOAfkII/0bIz\r\n432jntQIBYRnCu9rGHNuXDRaUHW/qZkjTvBk1JWq67cbDXviE2L75RxzeHCZ\r\nlTySme5U1oGWp+L3kQtYddO8+63Z6H9FvJuYxNhlZ6kUebz+NZU9+Hc/NvU7\r\nKy3PyhpmxCdvxJDkOK6dGIhm9d0EWPd2zN4LNQ8+17z3gBIEhJOSpVGUSL0+\r\nIgIzMEEtb2Dx8fdMZsdfDs1F6R9+PhtHyak=\r\n=llbe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-53f8d2295a730a5391f7071525c42440a59fcdeb_1678481352427_0.10548686153901832"},"_hasShrinkwrap":false},"0.0.0-0d98e3d17d6a2b5b5bb744f751ba73663f34084a":{"name":"react-image","version":"0.0.0-0d98e3d17d6a2b5b5bb744f751ba73663f34084a","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.75.7","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0d98e3d17d6a2b5b5bb744f751ba73663f34084a","_id":"react-image@0.0.0-0d98e3d17d6a2b5b5bb744f751ba73663f34084a","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-oOuVQNYpam9a7Pby00sUW2GjgniPRYDDODsP3+FnLomKz0HlVsadGYc1HgdoS0YFolzumWyVchSga3cLU9en1w==","shasum":"f807a9a7e0c45fe1444ec262d9658f52549239c9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0d98e3d17d6a2b5b5bb744f751ba73663f34084a.tgz","fileCount":20,"unpackedSize":40359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICNW7+Am9ICX+AHlRbYNh0JR2XAUKA/2B5+2dspUIcWLAiEA+W2eBZCNtFxkEvSrYd2gV1/AuxBEPQGn4eC/Wac7lXs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5iyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreQxAAi9ASA+v0fAPZx7f39/w8Y+fiDYaEk3Lju9LW8rM6Hibh3yXG\r\nKrhL9ymxQj9n35lX4CHfxV+hH2KGI02RdFJnbHWPqHfjWRJB7Ik3xcgPHNQB\r\n1vW/9MbnPl5iM4qhJ3+dUr7dmApuHAJvGr763RZAdOOMUmrVMwoQp8zoMUIw\r\nVvDHMYeQcvh8/cJX9Qw6pP7aM39QShY6SuVCuQECfkRHnzXJ2PsftuBOfbf8\r\nmms3V+E0ZmmaDwqEWBLfihwt4dDmmxkTf6dUUGijCv07tbv0pjCd6Nks92oh\r\nSH8VI18dhf+7Z6iTj1HXzAOQsU6/ENq3hkwx1riYeEKoCka9LGlYO0/Ca/S4\r\nVCuiY0ggDaTtFXrRDVXEoQlARNhhSdUb07qT9RbKcoNQaZdgkh02ctV8IfnE\r\nVtzijUtgkuWVOn+f/74FxeV2Qlc8yz3UEXYYWlbU2Cv6FQRliFprG1zNDt3W\r\niXZ9h59U+ItqBc7/9fLrcr13YLRwq+J86xQCvS60STyMpNqdhEPBj+9ulaMO\r\nky296Me4oeft7rBRGlXZHynyi6YsG0mLbJ84as85ghIIrC+hSCgKlc3XqYZ8\r\n3U5/6hy7xSNZBVP/T4dT0BjnvADUjmOfTBsSKqZdf0ZGuyU9An25Rvyf6ZGB\r\nmEXSYEsG3gzN3uzBKDnmnnhiTZz5ztV/290=\r\n=ELCy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0d98e3d17d6a2b5b5bb744f751ba73663f34084a_1678481586224_0.42694310891946374"},"_hasShrinkwrap":false},"0.0.0-0070e2439095043f8d3555e0621f89c461b28305":{"name":"react-image","version":"0.0.0-0070e2439095043f8d3555e0621f89c461b28305","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.3.1","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0070e2439095043f8d3555e0621f89c461b28305","_id":"react-image@0.0.0-0070e2439095043f8d3555e0621f89c461b28305","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-wQiPO5zwtDUC2fxGgvTRC1hfhT/5ahN4ZlmlZHma4E0uVCatUbE97F++qW2j4mx3PxU40IUG49lJyFAxSOiyBw==","shasum":"16556bd6f33f3510e7180551721be0738c5c39b4","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0070e2439095043f8d3555e0621f89c461b28305.tgz","fileCount":20,"unpackedSize":40359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbiC+AAB7kHYzyy+os6CUFgXYA97wtXYfarmJ0vsqQ7AiEAtsjXZaEG41KUrfj/GBluqt0l40OOqWoFsU1ezmgTu/k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9F1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxsRAAn/agL+2z9y4JqtUlI7KcBrUBapDeP761NmI+Se4bkJDQz8O8\r\n+49PXgU11x9gTb8lBYC/Y+tscIY+vwvDavwZhY4egYzve19Ld9FdgFluqRNm\r\n4NuPN4m31PxaU7jSPk2odV7tPkohjFtpMTjqt+hypzN0hvACj0pq3o/vsV7C\r\nvmei9OsyZRy4h6AjANGfaVgP5EWuB7kIjwHICgRirLqbsjD8Jb+SSDPbkVHP\r\nYj5FVABnU2/jNOyYiiji9n6NSV722Ipgos9micanzysNaQd68XgCiRZw4hjy\r\nM7IVAO9Gpy186SyuuL/o14uGu8tqN8OjIj7RE9YpKLteTpXulUs6FS57k5lq\r\npenIkvhqvgEGpDzKGrVR6/5kP4fkzsIh+UE8BJFDICJkpd9Qsw2tUO/vVsEA\r\nOTuOd7/SGpQI6xf5bZC+UvhmLjDubapK2DUaA5VBz3xP4fbSEs/Eolgl9jdA\r\ncz1Q99peWBbegKKuXwAtLihUK/y9VeBQEEHuXmmUtyMLMSrbT8e2Q9Yn3UGq\r\nEyzxI410ZBJ0++R/BKcb8bBPANcnZEUa6cpK/S1Z3/Nlz5iukw6kGP4y0ujs\r\nvz+ySKxBTrIHnjax1HRavN6Bi2GwTzgwyqc+8djdzFVmHL1SF65mgSjd1GBM\r\nanO7981ylvKFBo61JJQPCW5K1rw21YE+AAE=\r\n=ufJu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0070e2439095043f8d3555e0621f89c461b28305_1678496117079_0.4746854892005563"},"_hasShrinkwrap":false},"0.0.0-18b280745614fe8fe9ee414d4985ac8b27a9c643":{"name":"react-image","version":"0.0.0-18b280745614fe8fe9ee414d4985ac8b27a9c643","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.7.4","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"18b280745614fe8fe9ee414d4985ac8b27a9c643","_id":"react-image@0.0.0-18b280745614fe8fe9ee414d4985ac8b27a9c643","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-b+26AiY5Cv7jy7Xd20q2b7StsTjPpYbw8fsTvRC054FxsMre5bO3pjHhFPOdG2wVHM+wIDcY3CcRI85OdhvcEA==","shasum":"21bc2363cba34e3e6f16fb39379ed4ef358c0b7b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-18b280745614fe8fe9ee414d4985ac8b27a9c643.tgz","fileCount":20,"unpackedSize":40359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVvnQCJg19t62C4D7JzbLhtTDgQ7ciwij+AGMqdSZXOQIhAMgf9QQzg15m8Qr4eNbdIuSY7iYVKu+M0al2Y7rYtuCy"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9LVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUwQ//bZncKwVaPexLE4b7ID69kQnfYYeBSPeb2G3Yg/hcuiE0hfmn\r\nDTvzn8I1XlN6nE9eakJRIJtttlEhmfO6n7DSDvnkcWt+3ddpd5itLNuOOdd6\r\nhoIdwjI36DoyVHmTNqol3Sw81G1b2QKZNrmnvOTXbWEcDJsbjn1vrwZ53lwF\r\nbZvu43n2ykV7fG1GQB9nW54CyY3xfXed/qpd76DWxkJrLHc5ymXWfgna+IGf\r\nCm0aIavjg3MsSbsPGe/iEgF/BRtjV0Ui9Eht3ae+W8L0Q2JAArkJPXr5MB/O\r\nec/pvAPJ+IgnJuEIxe168+9O40CUnsvrmr+sVhhbB5jcpElc3WqwlPmPpKgh\r\nyeAsBJV7LKRXi0xE8C8Mtqf/ZG0A4nrU13GIAtPUXWCjhL/gT7SM+lmbkH/1\r\n1FsUXP9fQtXUri1xdKLUnLVG6TzewaUbbCuFNb2Y3wYUZsCyy6CqM9xFN5Zw\r\nwwD3YM92LMPaLCKabZMadt1ie57SKCGcp7P50OEuVKONQIX1RxSW4GGw5C9c\r\no3O623vPntMCOku1vz8tqzcMbX7J1zBY9iEWbclys+XIKeJNA5kX63EYCgnB\r\nJlDsP096Y1gzu6RrmjL+MpG0Dsuzq2tvi983xcD7vAvoFFfHwC3UaDBxAyHy\r\nEyLhmqrLxFT7rMxp8jzuaYxcxiEYGMGy/cA=\r\n=G90g\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-18b280745614fe8fe9ee414d4985ac8b27a9c643_1678496469354_0.9741726534222372"},"_hasShrinkwrap":false},"0.0.0-664e077b06fb839123d503861aedb5332545aaff":{"name":"react-image","version":"0.0.0-664e077b06fb839123d503861aedb5332545aaff","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.73.0","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"664e077b06fb839123d503861aedb5332545aaff","_id":"react-image@0.0.0-664e077b06fb839123d503861aedb5332545aaff","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-xwVioKopCvemOGunBgs+GKRHn0BeYkDmatPc9YGC+MOcL/ePyLkgoZNqVXopTemMbI7Qj61OwZ0Wzm71EWRfdw==","shasum":"040f96fdf7d9b883b303b6e7b376314177e2e20a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-664e077b06fb839123d503861aedb5332545aaff.tgz","fileCount":20,"unpackedSize":40343,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYm8BGbVYUpOEjjsG0cYGupXc5ti/gkP7c1WbiWkem3AiBzDYmCkxDsJuWGIJXUdp4pWGHmkwbEdNPtPEZJKDIFRw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDAsAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrbeg//UctlGBOnrnaY9p3AVIw/nrhv4z1OLamWObuZA3r1d3zFEMNU\r\noGUA4H7Pv/bUIqwDhlG65WoElQqOIwmLa4JPCSJbAusVSnKlQEIYLYXNX+Ym\r\nNYfECgDhfQkpRkDkvpmaWSa02kFiMdhIM4NsWQd+9OqqFI+A6HAMSuYIDMif\r\nwNZKL2oltB9XlZjVin/YV6/jG6MvSPYON8kKxfBKU9EzG9zx2YVAule/sOF4\r\nTl7jH7Zls2GNIyo25F5mqYAPv6Io8Y+XGsXJIa6PFMyBmM6DDVfYjleopbHA\r\nMjB1R/Q9oBRvWGA0DweRcCOXefGuN52rYfK1Pd5fEw4qGPEM3qX3shBG2Eo3\r\nBJqX3WoyA0/IoQ4+5DAlPG5XutA5/XCowBYX5nNj+W2ev00i1jfZlqbQW/Mg\r\nFzcOkid+dyyUgkK2CL/nB3dcu8YXMqM91e6905x/mswJGGlkhZMD4sa3WCVZ\r\nKbT/NblSnKNVjG3bblUcI9Mh4FL2JCmlczZsBoeU2pa4CpXNZryWnws/W63x\r\nppRPnAEgIcGaXV0OvLq/oDKswdESxh2L4SJPRlhceTXUhnArT5FlTIyGr5W6\r\nKR9s3+uKa4V2847Y6wBhj2+/9wDNZ4ashMhCSwHd/iPl8CGFwZpGYa5Aq7+R\r\nzrlveqF7ykgRifoFu4Qgp3Up1JOqHAVRhM0=\r\n=/GN8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-664e077b06fb839123d503861aedb5332545aaff_1678510848727_0.055242159420373804"},"_hasShrinkwrap":false},"0.0.0-6fb42934fbe689938da572d97c4ae698230c3e71":{"name":"react-image","version":"0.0.0-6fb42934fbe689938da572d97c4ae698230c3e71","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"4.10.0","webpack-dev-server":"4.9.3"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6fb42934fbe689938da572d97c4ae698230c3e71","_id":"react-image@0.0.0-6fb42934fbe689938da572d97c4ae698230c3e71","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-awd+D8BocIgGnTmJ+zr6juJi1+Uz+SJ5Df8F+9AWaivifkNC2Cna5wzkAmRSE6y6NPHiizUhfBJoZDQETzGhqw==","shasum":"684acb71f0b49ea601ca57e927d4ba9553631f62","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6fb42934fbe689938da572d97c4ae698230c3e71.tgz","fileCount":20,"unpackedSize":40343,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3g6sEwMYdoptw8Px5NHgHG4euxpBva+Ei0u3WuqXdUAiEA/IVKkjb7PJVvvtfx/dWHyVJ0o5E16usuZkUgS+aI5IU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDELrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ5RAAi0U4fv92SVQe+N8By1Nhj9t7g2hF2daahPrTKxOW/dA4mpLb\r\ny53CNxJx6IBjbyiYP+q7hETQ9nxyU027WLHQeztsjKnIwsl1qOVM5xrbyK2X\r\nwB9BMWWETxU7+pLSiHHnvmUvVbuf/nfY/j3eJ1umdZ8MkhfdyQtfu2x45YlP\r\ngduULpD7ho5KFQ8CmVM3jY1moyp+1i+63AvBJYFoXG3GyMEROeoHYwNexAyF\r\nPIdriYqRaTVZsqAdbLLuQZHokTDKfe/IvlopO6A3OEkZz1zl+fVu+v1R7VXR\r\npw4xjQN0VI+uBxqYQAcclXH0u94K/3vYV8afppQLDgAyXzTPQTwwJ3gQIM7l\r\nf/8Ru+xXibhyobLqHiT9PFcwMj/z+Ue0F9cgnlfhiqNIIpMiSUSpMNvNU0Ox\r\n4uYKqUyS0tOcUjMiQgU2ykeNh+N3PfPEakopMNQSyDlQvHg6/51urr4lDUj0\r\n+g3Vd2XeOec/Q/IUwnwwh1GX3pwZz+NuimHUULsY+pdqPgW+d0eao/80CVzU\r\nqWVK5FB0AoKiF2F5IJKBzhDYVY6d0xUWp1Cb1V+yWLCxzJ1pABSXSRqWrW/g\r\nHBvy4tKioeC2w/LbQcs5GTWwYh4wAQFwU6qUbOg1+JLshdAIzGJEj5IBcGMo\r\nRatRIOSp2RqJkj3JH9Mq3fYPG85gLxpdvMA=\r\n=ynHC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6fb42934fbe689938da572d97c4ae698230c3e71_1678525163758_0.8561701199944884"},"_hasShrinkwrap":false},"0.0.0-e9882c4aa5d52ed3845b0274ff5139cc52c379e8":{"name":"react-image","version":"0.0.0-e9882c4aa5d52ed3845b0274ff5139cc52c379e8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"28.1.8","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"4.10.0","webpack-dev-server":"4.11.1"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"e9882c4aa5d52ed3845b0274ff5139cc52c379e8","_id":"react-image@0.0.0-e9882c4aa5d52ed3845b0274ff5139cc52c379e8","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-F0Ag88o4X4qgJmx3HsnWKdMwMQ8kBGFqX0nRj2Iycd0mA45SQPLKxSp3XVezimka1i6ln920B9ciuSO07ULhbQ==","shasum":"8bb12bea55c6324a3fc2425c78a55a20383983cc","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-e9882c4aa5d52ed3845b0274ff5139cc52c379e8.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaWXHIDdR0qyQbXMuA6jWmQHFkAKL6C3oZEzfdFPZLJQIgTPI7u35b2FDuu4KvxyYDj7rWzD/13DefdbkzuN/EPNw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDEPaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpspxAAhGXS/ICLrbDjtoZlgCs5O7u9+fGkRQq7RS07G+3Te301WXfM\r\nWZ1SrfNgvGWy6KOFf9i6mkf7zfTy9i1D/68vsNBvodBLajMZYiXIQ8clSlHS\r\nKPW+Zbgjl0MFki04pKAsyJhbpV0Qu7lepSFvM6zyVjyf4RGAAUiZLt+I1+8n\r\nCRWpclEzvZG+N/AGcJKMXk9HNyC1KFSbYjH0ADpbASDafzuKAtaWNc0mUH6T\r\nYdnzJiEUXjmFoAC/JUEDTwZTVfrXGmwIAD86rTTML/frKlGJrRLxsPVb2qhr\r\nbpWJVk6Q01vi8n5tw128gAR1jvhewdUQ4VZuTYuHuElisD8tvyHzed4BjZBk\r\n8Mx/Tx+LdUASqdJ2aUJJz95W2JpNT+YRkYRABMHWuxKDSvCqekK4UEdJQfl3\r\nE408neeu1LvMXZMcipDLnUOqBKjxtqmfSXlMXDDoy4EBP66iAkcBHtTIvK6i\r\nPgxZb/10WII3DJAhcB7ATLHY5h1LSPKsKA9EGXNXtushE4/ciwjW4TWlmLfV\r\n2wJtuz+MLoY1ZHv0+CXZtkkq6IIk8iGpBb0BzuiXqcQzJSZuGW5hDAO+b9d9\r\nivr/lTlzMV9i7VIQiNhbezKwszBg8Q7/45p3nKAgk1YtXrcSymFO8EXyUZXX\r\nJB/g69CBx/jR7gOdSs2xOxmSQriJ3Sanwzo=\r\n=wFO9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-e9882c4aa5d52ed3845b0274ff5139cc52c379e8_1678525401888_0.412967056934159"},"_hasShrinkwrap":false},"0.0.0-0cf6d27b29a57ce6d6e441cf88d566c71796f551":{"name":"react-image","version":"0.0.0-0cf6d27b29a57ce6d6e441cf88d566c71796f551","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"8.3.0","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"4.10.0","webpack-dev-server":"4.11.1"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0cf6d27b29a57ce6d6e441cf88d566c71796f551","_id":"react-image@0.0.0-0cf6d27b29a57ce6d6e441cf88d566c71796f551","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-YPMPGec9UFOigz2Yebe27CtKXKaop4vz2hIY54P6dE0mAHgdUDoovNiQPOG9O51WYzMofvRvHY7V4FG8827FuQ==","shasum":"4014199d42cdbad4e3327254f615a7414742d896","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0cf6d27b29a57ce6d6e441cf88d566c71796f551.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2g5EhSnlF5fY4zFD43QpCuVW+MHkCn97H3/wA6PlMCwIhAM+M8vBREWqjCBUYR7f87a2PmJPrn4aTKFkZEkjLdz4R"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDES9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpspw//VCHeHe4QUYo9IjN1b2lvZ3YfYeRySCDDIx9QLIGpsYfIOTvh\r\nwSu01z0uUZ1bO20RQ9XZqLY0b2usRF47P229sWzK/ouU1Zd/xqLlND6ontyo\r\nVaaR5ms4TijVfpJHCVf0FNa6/EPOBBovShI69n95t/LzdPCrXOI4GixeqDoX\r\nnYWxJFm62/Mn5c8BkIR2dM/4kU08aGoWiwvv2I74+vl0ldqB3h7CA+dw5MAM\r\nf7qY8bzvxwF15cMakhLTPMaxRDOSHIsvgPP2CMyTV/b6gNXKJsIykZEtYpjV\r\n7oiHge8/E9a7L4Ui3kZGqqpYxjZK0qfs+kDORlqNrY2gVC5uQJ16XvVbIJmo\r\nBwm70M6WNGFHAbZ6uvyjiSMsqAx7cQZrBc5xq1XQNl9uvVmkcys0Pp99J5mQ\r\nwo40zjNmH3zKDIUzMVJrK1grVGRipMIjEMAdeLvJIpJH03jeEz/fkZkYRxqP\r\nxyolibP9QySq+iQ8KSC3r9Iqy2rCBern/ACOMiyPXL+AstuII3SBNLBnmhAC\r\nDkCC0S8Ib/MG9g4+DoTtwq1XbpzIkl86F3DUebTbT6xjnHie10P+91M7wHU3\r\nNI/aQJJ/EqAaN5vX9ev2B/NYhC8Fgc6El+tP1hYm/JA5Uk8PibkWs6ezbkvz\r\njlXv0GNtotfACri9+4DrpCDKl9QTuROvl+8=\r\n=eo5f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0cf6d27b29a57ce6d6e441cf88d566c71796f551_1678525628817_0.5033592046880877"},"_hasShrinkwrap":false},"0.0.0-122ec3b677a2513c2069434c579fb462819ce573":{"name":"react-image","version":"0.0.0-122ec3b677a2513c2069434c579fb462819ce573","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"9.5.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"4.10.0","webpack-dev-server":"4.11.1"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"122ec3b677a2513c2069434c579fb462819ce573","_id":"react-image@0.0.0-122ec3b677a2513c2069434c579fb462819ce573","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-nkAyeNPcff2xKFYew2BLHRPXTS1eizpqcpSP7PUOOfyrc5Jbem7xywSLEs7YtgjqF2gzBU6MaCQqirh38ilLxw==","shasum":"e8405c7595f16fce37f8ba915872874072898160","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-122ec3b677a2513c2069434c579fb462819ce573.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8CivLTCt3UBNzvPsxhPaI9dzs0FqFPZdpK5G50U6oyAiEAysMAjvUTGHyfiI8ZoZzjWS3AiA/omNxIrhxSw0XTx0o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDEV1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/ow/+KBBAwMeYQbMQCDt9Q0EqQS6yyR9is5FSC0ZIbNCD8RlAuNdX\r\nmuCKcPIBWbmpplM9Huj3edWKreu+naWNrVT8n2p7pwpwtBkgvgrFE+kRRRVs\r\nKvcNMYmDLPxkQe1OKA2DzBmg/n/yGwRusXojxYFvaAZUGh/HPCngiL4US7A1\r\nM+KX1V6OYusyXzNhp2tuJuQAQp+zWbXTZEazi3c3SaIZJLnxMKyH7eV0PaLY\r\nM+zBpTZVD3PdeEdGKnsf1SQFE1pj3i8AOJ71Fz5Y2a7sHU2J2bx+3t3ZzPAh\r\nHUoJTC7PZgQLswLxChED9Va3R2//7/ILaMK/j8pdsji5TRj5seLHB0wTVQHw\r\nOS0P2BNYhAiyAVSzw+j6gzQpwYmkWDs2xwuGaoXsA2Qer4lm0TrUCpe3LJqI\r\nAOlDVzJDUMsK21iAb/dswKLjvzcrifEqr7QVtAX3pim1bLfBi5/8XmGRdf0i\r\nSE+B/S5FmS1a4S3kqW8J3Q/uBzIn76AG8j4t0PD8PtJGx0TAzYBCXg9A+k+u\r\nrpXxReD2Kb79IzreOyKBoIhI+ZuudNXfRXYDHFbU4P2Oaneeqet3IIyJkdo3\r\nEn1/I/TuWh0AVvM2JDFJIkBhYiiNkdUjXcFIFipRKxKKonuu7r56CrbA4Deg\r\nNoDh8MhO8DyCs93w3yJQIp9zL6XeP2aAguI=\r\n=WZGk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-122ec3b677a2513c2069434c579fb462819ce573_1678525813116_0.6920852139868661"},"_hasShrinkwrap":false},"0.0.0-0a7be6eeadfa89fc67605dcaca7eb5638c4909d7":{"name":"react-image","version":"0.0.0-0a7be6eeadfa89fc67605dcaca7eb5638c4909d7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"10.0.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"4.10.0","webpack-dev-server":"4.11.1"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0a7be6eeadfa89fc67605dcaca7eb5638c4909d7","_id":"react-image@0.0.0-0a7be6eeadfa89fc67605dcaca7eb5638c4909d7","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-ENOlJMHsdF5kjBm6XqcXHeiMGLS1nOhclTCLE6KXTW2cbZhdBsxWMWz8IbtkiGMp94xfz7/v1GrOhe32u3rCLw==","shasum":"ec0719e74ef95504d561e167871e619ef64c2595","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0a7be6eeadfa89fc67605dcaca7eb5638c4909d7.tgz","fileCount":20,"unpackedSize":40345,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9SjYvco7rMZEeVa8GSZjFmw/FwO4d9NLYP/ZwSkLOWQIhAK8vodx8njmwhJ1RuQ4wl0/vV2agbecp5SXUT4fClTLl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDGo2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhsBAAi8sTa6OWL/oUXfJYYIzQI/u+SpK5ksN4Sw6V1qM8LIif1Ox/\r\nR9pqWgbNgSn+XLWBmO5qz/+ZiteZZUn6sk9qz4SVU6gCLBsvBwh5k4hulRwq\r\nLXRwgYfCwRHYNiJkRm1R/UaIogEo8ifZdMIpe47Z2h3NDRVswaJvO0yj6h2f\r\nokFBcatvTISHJi6VY+NCPY+qIlGqYqSLcFbi7KbuaxVlCbKLue5VRzjNFRXe\r\n2kzKvPRhHqv7ibjVU81dqNaFGZId+Jx8F8HJweej8OpiQP1MzAutIr/rVInF\r\nkBk9kvhaUMlRr0/pVS92VCpBNirB8ApOIxVBW4VJ43hfa3wLtyJUb8jnsWmu\r\nNhegcJcL0YdlUtNz4fbk+tCR4PNqXqM1HtHAZpQOwBQA1XJ4VRVWMxvCjmf0\r\nk6jIycBPKc4PI9cPwN9QuhTdfv3YEFLW2OiwF6jH9HHmHgGD0TwcVqDCt3zs\r\nnOslTyNtL5qvZ+65nrYQTny8e4+SQzJWcZmVgSS1gb5/67jGp8WC+ZHSBI+0\r\nqBAk3gNm7F14HGbz0qfjkaaTabl113qgxRgBmEiu/M+QJFfz6I0wykuBnk8C\r\nVDWzOswuEfJA4KyzYBqhlcjg9eYHt7IvAccBfN3b3Wqk+hTHzw096klZg7ls\r\nHweO4LOW1i9XbClSZTXpupnLo92MpfHB0yU=\r\n=D043\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0a7be6eeadfa89fc67605dcaca7eb5638c4909d7_1678535221999_0.47360972413027924"},"_hasShrinkwrap":false},"0.0.0-54a8471153ad557f6a17511c1d79d4ddcaca2fd8":{"name":"react-image","version":"0.0.0-54a8471153ad557f6a17511c1d79d4ddcaca2fd8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"10.0.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"5.0.1","webpack-dev-server":"4.11.1"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"54a8471153ad557f6a17511c1d79d4ddcaca2fd8","_id":"react-image@0.0.0-54a8471153ad557f6a17511c1d79d4ddcaca2fd8","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-P2K5kKPL5AA+H/uHL0nyuPv0hy5gbDNxS1J9fjA8DPbMskZkxeYefpI/gQZ71ug3nHRLm0gGC4AXq1+Foi1wkw==","shasum":"cd9714d18e519d0649455f63c51fd6cc0a6fe4ff","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-54a8471153ad557f6a17511c1d79d4ddcaca2fd8.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgFNC3VI6UIp85KiP0fbmyqGs1Sul3lNWzVShV6k6lMAiEAhleHCHusOAhi0RHE2P5YW5HF/GSV2MqQtZDgc90dGaE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDImDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqehRAAipzLSXXcsmoN+HJhwq9XsuOSVeg9WaVLrpJtq2t/TrauIdJn\r\nfDdfAZ+3uWeolqft8NYzuVy2hn67mUlNR1AZTSn4nBvg0NkH5su6wchg4Bk4\r\nDYJTB/dynVWTlxLoAYIAvekHPurhpexebgB+7kXQCRMK2s6YqYOue40DJz1I\r\ntlTU21tkzORybsa1Y1wxs44VZDXQHJS6ibFB80ehD7B2yC/Xc+lSdjYqK3Ep\r\niXjoV5VqPmuqk5CMFgLE8LRJPO16NIWnBD+lLJTLRysdEFr5bKFRhxRRKOFm\r\na4SnodtSpoDiklNyMH/esRJ0Aib1TO07oC3xvDhln9fGS7vUw34xrkEPxMMg\r\nu532ZjR29KPTMWNk3VAT87b5mOmh/3KtSTzM5SNo+FaZ90ZyHShH45Zgjp4P\r\nsVrDHMLC9j8GHwqlCH2b02lzh6X/IefQbkAptJrT9nI77Tk555Xj/SCmrEgH\r\nE+wPXYq6OtMUMD8BEt3lf5bSpRoAX3zK+LoBsh0qpCqsHYg7F55Ne5TDJE6e\r\n+OC4gY0WNTqzf8jxL87HyqdNGGLzBuPF8MzuoUUsnhiNR51ZIPniDGIdqFZ9\r\nbqgQjxYx1omES8Sqt+g61EFiluNzHoJTPnsvyO7NTgPeO/uiBlvb0gbd2wG8\r\nrA52d8WKOl3GLM1QOub99oBOuPln6340KR0=\r\n=LXeh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-54a8471153ad557f6a17511c1d79d4ddcaca2fd8_1678543234935_0.8297052937918226"},"_hasShrinkwrap":false},"0.0.0-94cf42ba18a504fa7af2d51e62b16fa9e70d7ce8":{"name":"react-image","version":"0.0.0-94cf42ba18a504fa7af2d51e62b16fa9e70d7ce8","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.1","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"10.0.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"5.0.1","webpack-dev-server":"4.11.1"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"94cf42ba18a504fa7af2d51e62b16fa9e70d7ce8","_id":"react-image@0.0.0-94cf42ba18a504fa7af2d51e62b16fa9e70d7ce8","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-doqT1OvAuTJ+XK3OAeqPXwqGonBHeXzSUTzoFLM5wa0UGNZFQLYva7EeD7Gt6qtrtKhhgdHXywLDgBlKhHJOxg==","shasum":"224f392e0ea7bfb2e37bb5992bb0166eabad46b6","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-94cf42ba18a504fa7af2d51e62b16fa9e70d7ce8.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtvgSHUT4Sek5ZCaqDMsuSDm71O+UxKIQy7/IdIADX1AIgQ1f73ivtN7dvHOJpH7MqN5/rN+NZCVOOM3CPAh+NVx8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+FCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0LhAAiiMavS8n+8Ki9+ob+h/fAmiH5eD8IdojcFMUpnNLon8k4mvQ\r\nppeKIJJgm4w2JbDLGWUzT2mY931KsuT+ukBwsBKfoj36qx3wHrnFwRLjZPNd\r\n3iyxSwUaktN27k5UlWToD94XXbl3AaCY3BL2njh2rK8TP3KFk37Gm7An+Aep\r\n2bTiXzs+zmUD1W1kLuQuZxq2xxj+3DqW3TMnxF7cVGnI8Xok1jvqIo2pKtx4\r\n95vzLHla6XWBKkkGXEVD94+aKqO3HPYj0BnvQDYXmceb6KAlRzhRQTyIDfSv\r\nm/NfiMzO3jUX2vb+QMTb0MXQqwTATh5of171+cU3ei8+MoSGm0cGmUgP1x6h\r\n8ek8aiGQEkHAZ+3b/cKBa4c3cxhTa5DSF1qDXevORzjGkEWNbKxOQprlbwVb\r\nMU48VIAMMnQoYce5Q/HCwJo8x0vlnf8LfZZpkdKurz8016su/GhikzDfYigP\r\no/nyIerA8aQ5JRztqnGg4mbIAnPYh0pmWyof28aVysXa8KvNrKwSBB/RvuoP\r\nsr6d7mamUfrrOaAH/yd6QMMUcmlZrR0bSsspvUjSlsqKwhNnFp4bFkBpPydy\r\nEHJgJk6KoNDs2gseU8ue7aXTkQhk4mXNImbwWNVnOk/48iuJfnCHRvSi1Q4I\r\nuE+owIHcPJA60sK77GjSbV9+7zo7QD47mlg=\r\n=CnhM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-94cf42ba18a504fa7af2d51e62b16fa9e70d7ce8_1678762305915_0.7321721859812631"},"_hasShrinkwrap":false},"0.0.0-c25b2000b872f70700aa05aec1e26e326ba28594":{"name":"react-image","version":"0.0.0-c25b2000b872f70700aa05aec1e26e326ba28594","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.3","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.1","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"10.0.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"5.0.1","webpack-dev-server":"4.11.1"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"c25b2000b872f70700aa05aec1e26e326ba28594","_id":"react-image@0.0.0-c25b2000b872f70700aa05aec1e26e326ba28594","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-VmT2DXbyk3417f8Ejx4l5uoXJ7PhW2VDfUqftbnRNWZRsFKNshHQCu7jxbdA0EjWLLX15Ol902zfb7vVvSy3rg==","shasum":"1a45dec0dde2615dfff4289ccb80df397b488b13","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-c25b2000b872f70700aa05aec1e26e326ba28594.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQn3+aKl5zCZcLo1EfvBbiofP0ftfQv2RHi/m8c1Dx0AiEA9/2lUgJwF9Lsovzoth0edzE8ju0DdF7lFHxOfilaHkI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEPi9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTXQ//arRbSH+pSJ89EHxfSYhWWHN1TQrSt9gO1T1wLvf0kaeou/E4\r\ngqF9YLdTHLY/VOhPpfOB0fkiJ7FFYTLEzB2SBUZzkmmssHf/BTdh3ZlFPlpF\r\nSFb5Wsh7qjfo7GsQNqeEGurIOqYOTqtXoE/qtfHR32XcqzbSCOxKSA2yNeFq\r\nQ9GWeRnxY8xbPt7oNM6o6a2HkZoJVsSVKljaq7QJhCw+Cuv92cmPlvuOwkbO\r\n7lQ6M7hxwzlJGac8rIeYyafk6CeyqrSDccp53Smo+zc7xn+xTcEjTLsgoPPK\r\nMlKUKuVN4eoyBrqXkFyu28sR81PhWbgk3ZmaZB6BoMxWCyJwyOk19uH5VVna\r\n8Mr6k/eEhPSskPODmhKwSVHfplO8yV9K/QH89/c/Szvz0Lxjh1PDI0yVjZee\r\nqSpHlH3WJPW+Lm8Cp462pJZrUGr7B9rKLlPoupTe/JeH3HUD6BFhvKhok2Va\r\nq4IFwz+CwUqi0fBMNYHon26/13LkxhQiTQZN1x+XJaT7kd670kVllKBK8WHA\r\nQ8PEKreY2bmt76WUrBgaCD8CzQYt5q45eCjfZgJZqgc4AlaonB1MIK/3Ph/X\r\nqpPn94IUY+32FgjfgZQwBpEI3IQ9qtXqsxAnLkiaoz0fwFBtAAKkGE2Sthef\r\nAiS2xVwwkQ4qsWhOCaTkMr3FEUoguFQRisk=\r\n=ehqn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-c25b2000b872f70700aa05aec1e26e326ba28594_1678833852817_0.5922662126506397"},"_hasShrinkwrap":false},"0.0.0-47b1d93ea5b6b282a424a46dfca7936c292bb205":{"name":"react-image","version":"0.0.0-47b1d93ea5b6b282a424a46dfca7936c292bb205","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.3","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.1","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"10.0.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"5.0.1","webpack-dev-server":"4.12.0"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"47b1d93ea5b6b282a424a46dfca7936c292bb205","_id":"react-image@0.0.0-47b1d93ea5b6b282a424a46dfca7936c292bb205","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-D2w2i/GfNEpVoCdh1sImolJrRZfBUCXv/EStzJOR3b4K921NhLWYJI0oTfTLFSW2QTR8XfGmJAJaxwAmfrO1Wg==","shasum":"3baf9b037810e4fd270917c8ef18d5ed321af1ea","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-47b1d93ea5b6b282a424a46dfca7936c292bb205.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnqKzW4q9rn/+RmqIFqmULD0G5oBOajkbVwIo8F6YVzgIga2AD+yI7ZTdXoaYYofUjnPJyVV3tT/VdhQ9lpS9EzJs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkETkgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop0g/+Jhg0Pzqyx7yAb+9yINvmnwKoArlqYj67opjYvBNNnyqbebKH\r\nDmCS5mddUF+ji4GOWT/3N8LpidI0oOwjuytpdXQwCv7GjNtgFU4KPmPb4SEk\r\nTrnSJWq/4qtFca3FmWulOYtor3iKTEVvlpXxWtfjtaJaKNZAs89w41sylLov\r\naP0Pc1fdMVWGQ00AQk4zFzA4YSQ1pYiOl9lZD8mbhqsURKmRDoTu4RsYh4RJ\r\n5tBGeTW+KrfO7VOwhVG9JKZeGvSD+nPWm00tgBdtDHL1BND05WdQrN/sPRmv\r\nhoAT87woj7XGLNw2dyXF7zUQOzbcaCZiAKk3L4nF8RYBLoMpn8q5NqHp7BZX\r\nlPiBsbtWtGcsxz//PXqhMJ0xrreax16vMtcUdzCIh07LeXJ7YOhqyj5GaWl8\r\nxr7dXgpHwIUkRjbkaFVtFujMYder7uhT+ZjTbwesJRhP5bppN5/X5ntz1HrU\r\nK5v2c4PamcrZj9hguGZhw24XvJlqFhAePbKNwykLozd/OIKrynIhmkTp3cS9\r\nQUpc3ea0rLGxr7W/HSd7Ryf9HD8gRc3WQsC2/jgiNt9rrw+R0qo6yyVtk0uZ\r\nnU4ctPpQTup58rF6uDgqUWffM+kE1dcRXAh5cp0scfmug7VwyDibv/A36lgb\r\nbXazCJjV1bwFzZL0sIwblQcC02K3++Jci+Q=\r\n=/Zxm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-47b1d93ea5b6b282a424a46dfca7936c292bb205_1678850335993_0.5994129577501806"},"_hasShrinkwrap":false},"0.0.0-683334f7262605945b45d9e5f83170ab54f672eb":{"name":"react-image","version":"0.0.0-683334f7262605945b45d9e5f83170ab54f672eb","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.3","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.2","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"10.0.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.1","webpack-cli":"5.0.1","webpack-dev-server":"4.12.0"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"683334f7262605945b45d9e5f83170ab54f672eb","_id":"react-image@0.0.0-683334f7262605945b45d9e5f83170ab54f672eb","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-480uOW07jzFl23hVQ4IqGfHZ4TUVLNSVWIOMu1UTPunXUcn9NcipqAzZMdaVHCQDTaTgolYmkyZfkwuDJqIMLg==","shasum":"c26d8a08245369f5b2ae466427ea4dd9fbb86ab2","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-683334f7262605945b45d9e5f83170ab54f672eb.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+i142he9JoHUqqH8CKsp4MaaFgv3F+4vuS1RE74jgUwIgavd3I82uVHCn1a13S2J5Wlrf4avRvHVSNsr4G3oX1NQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEa8NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlGQ/6AxX7q8ZZm0LUAgSbYd9lIo5v1tIRbpiQs3YnjWRFo8wRZn5k\r\nFf23zUjnjTASo1+3j9MpRaq0H9PrVAqN8ajk1PKPnHFI5sGz+OLiP5bU8HyP\r\nCsMhYq3yImEvadX22hr9CruAFOk050wvrlhTar3MdC1wUk89zaLMCqb5f7lT\r\nfFltJY7ws9tT+Kt2WXxPyKNlSy8AXyzv9LdYCuJhDsS/jSsUCyYm9NcChXrY\r\nkfwsHMj3Uuw6fOjoKq+lUwzLG7bBrlOiuVloYOkWD7CP9l3ehadEgszSE4Vd\r\nw+dQLGT87xIebZ5u/EwBEtS8owsNyffr+Jvxen2AEEoNG9J02Iwq1PGCnL5P\r\nrBvkdLh85/IKnLrCRV6gp44zxgiy6Bh+oESff3yuC7IHzw33E8ezQbaL7RRF\r\nFSDQO38Di3oZZNPKnuqOjB/odFbRSBIM22sTrhiMnYzsjRIb/ZOKfCEyM5mQ\r\nslezU0iYvxJ0ZU8g3YIhe1iLxXDJ9WsdSXZYAbmpr+UeEXttEzkfYl+pYZv9\r\n4a3+3ek5UflaAhhyWIxN779zwdM4iPMoNuZybYll9N2PcsqmC4QjUXzZgc9c\r\nKSQGhu2GRPap+i6ZkZ6F/YBGqi0lMRomxX1juRdqxip1HWaMmKSFGYNwEyJB\r\ns3TibCgTIGRGwwaFuTct4kUt0L5a6qbT0DI=\r\n=G9ep\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-683334f7262605945b45d9e5f83170ab54f672eb_1678880525394_0.21713580485784"},"_hasShrinkwrap":false},"0.0.0-26b3e73060cf3133d50a394f403cfd6ed5180705":{"name":"react-image","version":"0.0.0-26b3e73060cf3133d50a394f403cfd6ed5180705","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.3","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.2","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"10.0.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.2","webpack-cli":"5.0.1","webpack-dev-server":"4.12.0"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"26b3e73060cf3133d50a394f403cfd6ed5180705","_id":"react-image@0.0.0-26b3e73060cf3133d50a394f403cfd6ed5180705","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-mnS05cnGgYrfrnOjcko5LHAJcs9WKJ97Upqm9HeM2uv8xFvyVXcepfduSHuR/kI3LcnQOfKIuP9blxUs0kR34g==","shasum":"d78f4ae60e00e60a196a9290948ddde1441e0af0","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-26b3e73060cf3133d50a394f403cfd6ed5180705.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+H9dkytoPUYk8/rTNFNS+3E1nU3PRtpXDE1PS8Pg3+gIgHPhHP/0uUW5hhIJe41SZ1HUpsMiHYWb6ge/AL+1Xw9s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkElpKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4cw/9E+4mll+wCWVpg7Quhn6aY6H6yBdTB8+oUMdbAUcZkINY7ca2\r\n6+zoQgVCr+Qa8WWUyhFAozY4YJVmfDTABoAt0820TdzUsAp7soJ0gKtrKhDt\r\n2q5z/2RbT71WHbTtOsfypvWFpj4OyZBwpbq/t5omn0Z+CbnOIi7P+dWZB2U6\r\nYy6XjC+Fm3cwJP/k+p+yi1cPmk7OfaXvJ3yNy3UC3m5r4r3d/ev2DgvPYuj8\r\nfc53g3we7NbtPfWfnxs//Oj2qAazz/g2ucnLEEO4r0CV3H7PrKo6ef3Pp64g\r\nzDqMAtwL8STap0XwOcI/Wri8M6P8slwqgF0a/VaHKGQ05bqucMzC9OK0fIpu\r\nWMfcbuq8uypMGeWxauRBFETYP+O4LZMiCPu/BJrkr4/BiB9xFcZvVYJbBrFM\r\nXWe3siTuTowW3+MFIyojtLmo3/ekO7MRyo00I0kwuzFYtIIveezH3WDe8XJB\r\n+QQaYAWzpqROfB3YbfZoL+Yy+EIVuwfpxbBkExEsue8+OK9QeCXf8l+X4Nup\r\nV4WACVOU2msO+aKv4Fq0vh3GSrAb5r98E61gdDQD41c6QBkKP3cN5jf9b33s\r\nxwmUbkBOI3fCNxcb6KLGrnYNBbUqpMoPuoUUenRZZG3wAmpshw+yZ6iN/eAJ\r\n/4HOmER2js/ovbfnTAOd73zX1qlSNmxW15U=\r\n=c5cq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-26b3e73060cf3133d50a394f403cfd6ed5180705_1678924362448_0.6451472095780928"},"_hasShrinkwrap":false},"0.0.0-6b1a68846d755a5220b0f1e69ac778b4e9d369d0":{"name":"react-image","version":"0.0.0-6b1a68846d755a5220b0f1e69ac778b4e9d369d0","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && NODE_ENV=production rollup -c && for i in cjs esm umd; do cp src/*test.js $i; done && rm -rf jsSrc","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"webpack-dev-server","pretty":"prettier *.js src/**/*.js --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","browser":"umd/index.js","types":"react-image.d.ts","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@babel/cli":"7.21.0","@babel/core":"7.21.3","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-runtime":"7.21.0","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.21.0","@babel/runtime":"7.21.0","@testing-library/react":"14.0.0","@types/jest":"29.4.4","@types/react":"18.0.28","@types/react-dom":"18.0.11","babel-core":"7.0.0-bridge.0","babel-jest":"29.5.0","babel-loader":"9.1.2","babel-plugin-transform-inline-environment-variables":"0.4.4","codecov":"3.8.3","commander":"10.0.0","express":"4.18.2","html-webpack-plugin":"5.5.0","jest":"29.5.0","jest-environment-jsdom":"29.5.0","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","rollup":"2.79.1","rollup-plugin-babel":"4.4.0","rollup-plugin-babel-minify":"10.0.0","rollup-plugin-node-resolve":"5.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","ts-loader":"9.4.2","typescript":"4.9.5","webpack":"5.76.2","webpack-cli":"5.0.1","webpack-dev-server":"4.12.0"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nThe `<img>` will now be contained by the `div` with class `foo` which can be targeted via css.\nA crude example of a transition using [ReactCSSTransitionReplace](https://github.com/marnusw/react-css-transition-replace) can be [found here](https://github.com/mbrevda/react-image/tree/master/site). Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with `container`, too.\nA sample implementation can be [found here](https://github.com/mbrevda/react-image/pull/192#issuecomment-384340042).\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"6b1a68846d755a5220b0f1e69ac778b4e9d369d0","_id":"react-image@0.0.0-6b1a68846d755a5220b0f1e69ac778b4e9d369d0","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-iFmbJfHS3nCZ8Dsa7GRLBeNQo98oAHjzlVIrlL26NJpxbwBjwgP762ReumJEkIqEcii+f8kwx3XEFKt7yq9Gpw==","shasum":"98ff31f0030a7933a0f6310cd8cb591aede64262","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-6b1a68846d755a5220b0f1e69ac778b4e9d369d0.tgz","fileCount":20,"unpackedSize":40344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTSNnXW1tQtzmLLazeEU+o2NkSxVw7zIxgQqi0yf9JYQIgeD8gO4obW/pBkWp0ROB7IN6AIk+TjsCWsEiWGL8dF20="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEn/WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+EQ/+McE07iot8QEbTQB1wQzpBaQIhKGGuO6jmOw8A5mk4NB3OGFT\r\nKGf50lAb4OomlSMUEtm/dGxNL/Wy8cakc8Iysl6cnDcv70a4zkLu1XLBRMNA\r\nbPqqytefL7fX2Vg/bSaBhgRXqdvIevONqzisd9guuJ8sGx9eqt/8p1pl9q26\r\nI2pEQ69yOqmWnD+I7Vdc4kZKXaC+b41VBT1kYZvZpsgpo0VSKlH2KPFUbIYU\r\nH284Q7veOoVBAn7L/n7dX1qRDZM7awSit134hJ0a3+keDjdN7k+T2nR4SgXd\r\ntCaJABzGwoDr00waMnWsHTnVw3hpREAL4rlcP6Gy1M8J476qqYta1CGpbI5M\r\nX4M9IIXk6fZfG5ku8vrp/hUgtBKhpsdBiO1GVHj86l7fkBsDDLwHRH8mOcDz\r\n4F0Mt8ECBe+bimoNO5CIMukiSyZ36nm6c2ybbtXidSMsVIySA0OeC5t4GJ6y\r\nK5wOAA+kyWGrZ1AncW6Q1yegHlyJib7b/NIQLuefnMCiYw2h2SssgE1v/eb+\r\nxGl2qhJ6DW/djFdq4All8Srq9bEel+iO8RtwAHWo4emKEWqNtwepCH6KiZKc\r\nYhkgzgzFLmbGnNFD+fSnglKZ7jCnvmGZMKfvufNtzoqAMiLUnF/sDPQ0Xi11\r\nuaEO/rrJULKpAAgOMZAZlpE4DKNjfdys/Ms=\r\n=ksMe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-6b1a68846d755a5220b0f1e69ac778b4e9d369d0_1678933973932_0.1509626663556547"},"_hasShrinkwrap":false},"0.0.0-cf2a36523f469678bc7e039d0a9b61d0ab2b12de":{"name":"react-image","version":"0.0.0-cf2a36523f469678bc7e039d0a9b61d0ab2b12de","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.4.4","@types/react":"18.0.28","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.11","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.1","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"8.4.2","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"4.9.5"},"peerDependencies":{"@babel/runtime":">=7","react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cf2a36523f469678bc7e039d0a9b61d0ab2b12de","_id":"react-image@0.0.0-cf2a36523f469678bc7e039d0a9b61d0ab2b12de","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-poqs2brll40TeVs4c9wQQa841Ez3sA9Jon2UBszk6IYahWReCzat9tlTKfB2HMooDPi1pybWOXuq1VGo8hnC7Q==","shasum":"7ea09b4cccc91a2788849ea4823559afece2c8a1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cf2a36523f469678bc7e039d0a9b61d0ab2b12de.tgz","fileCount":6,"unpackedSize":16786,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV+i1W6VR1UACWMVGt05ipOA9UFQdlndijLXhXlRt0DgIhANq9SyfZurnhmRa+VeATrZIHpIQ9Ce+7y/aD2RhQu0nM"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFD6BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraxw//VBWmY2xc/WQdBemJBSFkRNFh8b4u9diDgQRaI98MLxzbcVfZ\r\nu9UksCivNmUt8Bccg05V2E5Te7otkY5UiIID1lP7ex3Q9NQ40E2GjPX52Jaw\r\nHx2VVGJn9p/8uORfmWGzCt54LhoJnWXyC0SVdhKQCQ/fJXhU6WAXIc0D4nSZ\r\new0rkCH4BOpT0yjB3JyD8O5a8FHuUcUmYcUdMEQ4+vWOYEaJxzewcF2Csb/R\r\nqzSd+NHR5t1fjyOJko/Hoxojmlu7WvmclHh+QPqxAtwa6PXAo1WUvszTGQWf\r\neyle5G7PoiIJMpVAM8ixnImAKVmexeTClAPXEPEIFGBYFxAg9wKc4sVCyDot\r\nrNh/fLcXXsSXGYiuzVF7ULu7urS/F69RRfdwgkyK1PVgb0h34Y032bT/6Rdq\r\nuZ1slUDVwlLijqls3bXuizIL7/X4qVednrKRajj4U/a6aOczcFONrkTeMfZj\r\nlsgs8tOoV4CfUJhDUJNsAnfRgUXuAnWfJXqa/GZQxZ/8eo1osNGpekpR1YUn\r\n55KV/8veYB7LM9MzudUyVx2KQRX6pTi0+/khYqSfDJSOhMPZ6kQEfNjGAO7w\r\nqTLJ3ip9PjumM8XeR4N6oSwQXatloU2biskLgpVjK5BEbCNE/q0nfy8aXXX4\r\nDOC8y6ZU8NSzfoZEk5raB8l4cWlI0JENKHI=\r\n=JQdW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cf2a36523f469678bc7e039d0a9b61d0ab2b12de_1679048320903_0.35633434201460945"},"_hasShrinkwrap":false},"0.0.0-baa1253a9b187b619045446cfb2a8169c13dfeed":{"name":"react-image","version":"0.0.0-baa1253a9b187b619045446cfb2a8169c13dfeed","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.12","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"8.4.2","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"baa1253a9b187b619045446cfb2a8169c13dfeed","_id":"react-image@0.0.0-baa1253a9b187b619045446cfb2a8169c13dfeed","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-3msNQobR7ng1X8ol6sinQPn0KxXAV2mwH0y32mi0UTmpZNGOREQfLHuLC7EgHL+2UUQluHZ1MLcrp3z75QlAHw==","shasum":"d05031715b2c6b7ccfd53b3b7584eb1408c3bda8","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-baa1253a9b187b619045446cfb2a8169c13dfeed.tgz","fileCount":6,"unpackedSize":16757,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHTR/W0BlHl6QBDQYevYBwDb4SIWwyxsyY70K7PmGqiCAiEA5dqqOKj+gPxxLyLAGIoaPD0ygi1A6BUNaKlc+bc8dPk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFD/2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnWxAAhvXWe3EZfgQpn1R2qLPkfZQRVFTP0CIcLy4LJVjZ1b0ISsiF\r\nUgBIYlpcCx2eN/y3rt7w7U96pbEqkT7T2B7z/QhP3ir3OGpPJqnfMEudcE4N\r\ncEKNGKfqTYtk1rwA7tYEG17gVDBM5NfGHL5Nx6yVI8/CMNI3bIIPCjMZbDK+\r\n3ePHEJl1PYrnOs9SMi1deOZNE3liarT338ju13RAIi4/HZzBFjd9CzjddQpZ\r\noleF80MGgYZ0zjVepHef89VxNSIQRGgE/Y07fAJxZbud6Iv2fyXlnbGmF5G2\r\nkPbvcMHZSkoZ4p1I/oKOJ+avZ3uMhaTeSsnUtgmFhIHp8hNoUJTTWLVfu+oi\r\ng9iV2TYmEto5gEX7s6QFiXugwKATAE05Td6zW+Fx3NZL81fZGgTNmGRJ9kfZ\r\nLJlUjiL6fzDOt9b9WfJhxBPlH9p3Rn7ghCy9+X81Co/oAQH3U0Al5GI6Tdfx\r\nG0owcbVeFeC2I7qqUgWLhghs7U3oL9Fc2MBuMWrBDedKsMY10wytOO3iC4Jl\r\ng1luNnquie2swbGhkIWVq8TDJv1dof+V+QBG9bE8jd0s5ycUAjhtMq+hIqlc\r\n0j49FjnUe5JWr/O6Lb4DZohb/TTklj/54tHGRat4y7nuzVFCblGpugnwKhTH\r\nn4ekO5S1vdPv7jlZsV+Tn2M17txdc+e6w58=\r\n=AZKP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-baa1253a9b187b619045446cfb2a8169c13dfeed_1679048693912_0.6146042748508411"},"_hasShrinkwrap":false},"0.0.0-d104983ff7d56c820f1cc5b70220f0fdc7de90da":{"name":"react-image","version":"0.0.0-d104983ff7d56c820f1cc5b70220f0fdc7de90da","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.12","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"8.4.2","prettier":"2.8.4","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d104983ff7d56c820f1cc5b70220f0fdc7de90da","_id":"react-image@0.0.0-d104983ff7d56c820f1cc5b70220f0fdc7de90da","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-iTZxu0FX+sLUptU2m/BkhtdZAmspTy/1jIMtclNnSOJZ1OtwIntk3baOG98CHLnS3R3eyJb2VKhb0AYnN/yGuA==","shasum":"ace7b4a34625839a346c896c22d368874f253178","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d104983ff7d56c820f1cc5b70220f0fdc7de90da.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0W1s+9sBaWOhVH3OiSM09SmjhksWmHzGwMJBPQaT/mwIhANPKqWXO/AmV88k6yCqstDCz0VMKBbJDJh6I0PJp8Nnq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFFT0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUuxAAjBpGx2BvxYx1dyuU7BGqwtAbWNHJlba3x5cM+K3T5zdQCY1t\r\nj2Ka2m7YxJh7Af/dpttTvbf2HIt+SyRgA7n1otkWSYkoRKI4/SDZ/OVesU1n\r\nTjNOMw4PgNfsXeehd4YErpxDzgvMHImKMUxc6K2IFhknl41dMURxeSZjQQxn\r\nReh21mpkPaZGi6gznSzsL0TrLOkZ2MmfPlRKhj3XCORyvf3ibkDBo+sCsG8M\r\nwlTr0pCupylIUAdHhFbpeqyoiC2jvKWiJQFW4jTqI4EeakzKqS/Dem8pYHIo\r\nLFHZ/RuM0e2BJvLzBvnJ1yJsf5aSz2B2qWMx8KBCPrHz5nydcbkxhvbAXKW1\r\nRZ925lnInbcS1aWWugrIr5VL2ytwKfjk8DowlmAueopWNcewRQfs5g3sbrJc\r\nIT6bih38Wju1uVnKIa1AEQYBcyNB+RvOiVgHEySAmzPBYYUndHapqyAQwv2E\r\nl+LMNOaalODCHa7EHiZ3kfwJJIW/SGm65lnhQVFtfi/1ZOn7KR1rx46ciaGA\r\nR87HcyR3fDaLd+0F6eT0WkqJHQr7JkNHekqRrrk7Z6R04GFo0RnJaH955D8G\r\n/L8/56HhvRx99j8JdDdqlRIIyYi1rBjtPK9wqwjGQ73srbdIK4fUdqGE+2xJ\r\n+Uqg+BQXaqH6f0vYrzKVXa9b/JW3KD/rmgs=\r\n=/YYB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d104983ff7d56c820f1cc5b70220f0fdc7de90da_1679054067959_0.8042475944166254"},"_hasShrinkwrap":false},"0.0.0-1d29da42cba8ac650875d10c2ee60250d62f3114":{"name":"react-image","version":"0.0.0-1d29da42cba8ac650875d10c2ee60250d62f3114","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.12","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"8.4.2","prettier":"2.8.5","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"1d29da42cba8ac650875d10c2ee60250d62f3114","_id":"react-image@0.0.0-1d29da42cba8ac650875d10c2ee60250d62f3114","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Upz8enWkiPR86lKhhe5wrx1sgZ8Fmg4XuKdRWgjQ/gwgHIPOaSnEQnSmKkJjAmu5tY+WVBT1C0uSvtyuiivlzg==","shasum":"283ec30b6860c7bd8cde122ce3fd8f2001829a83","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-1d29da42cba8ac650875d10c2ee60250d62f3114.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZvXNyLyRKJ8l5KnXmgfrnTiSMyXg1jHOUYpWasKez9AiEAl47suF72tYJ+ryEDnNt/sFBInWFUEtG46FEopyroQJ4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGDLEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKIA/9G3KkZEeRB9XtKhz5sYg+vg5JvrLZnzEjSffeBWKJ+B0vQZVw\r\ngn15mcDGPE+pUN+lc5HWx3oZU7+JukZAL/u5Fsr74ByuOIs6uWtglGN4+pes\r\nq843lmZ/HHkBeCoSTcAJg1Poz7rWaTYZys7Z8gXIPnMfMETB0N9VGT9Az/im\r\ncAR9NtP7hBfQVr6HkJhdiuIYar/RVSPiG1+p7YUVr5EdRNlsiIBIZxMJi0ff\r\nxgkI3noxjAXcau+mBAeygV1W8NXNv6cXbg2fGSM/AxwXEIsA6iVg9UhXubmm\r\njz2iJ4rDzRnc9qJ/tzC7CelIQMIKNNStgcE3hyuLCRoNSDV1Q/l0cX97oNDj\r\nI+Mh9b2B/GaCQ2/jtV3kemTOYxChEYXE80fiRAp/QnSwGxRpwi/FHksPKrCN\r\nuKnL8Tv3cYVqKyrWIMH9MZUD687lyJ6f02/mncZoeLtbq7/hY8u+QdvQNSYp\r\nsMfwBgGyJ4jsLjlei8jUUxihBEVNUCl/GbgrkkL3whYQot44IHa4edGdMrU8\r\njMH5oU8G028pfQVMwVbYWYb1FIiHX+NhwzBsC4Pv2wv9MKQZcLckywGUK7ml\r\nGNCUWzB2nggipQwbUGstbq50sFcvdCoZLQvl3D5+HOaXWqerOPnTRigZy71Q\r\nL6b5jtyxqzy+lapdbSw6FOKEFzm5D8b61YI=\r\n=Hoop\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-1d29da42cba8ac650875d10c2ee60250d62f3114_1679307460499_0.9959811453000431"},"_hasShrinkwrap":false},"0.0.0-371935cd230927d3d54a8fdd21d11deb4f5d423b":{"name":"react-image","version":"0.0.0-371935cd230927d3d54a8fdd21d11deb4f5d423b","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.12","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.0.0","prettier":"2.8.5","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"371935cd230927d3d54a8fdd21d11deb4f5d423b","_id":"react-image@0.0.0-371935cd230927d3d54a8fdd21d11deb4f5d423b","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Qc/+mCQrux2jt1fpKb1B6ZDfU/ErGHovEbSjwH5qrZHqEcS6sJg9u9OTvOthmM8f8HNuh79C3Te/DQPJEGSbkQ==","shasum":"7f766157b520919b5b9ca87c67e8fbf754fe80d1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-371935cd230927d3d54a8fdd21d11deb4f5d423b.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqcrU7rcUFJDdh+otINHpVjPZwyTT+mntteTP/6tQZowIgcmwbcKrjJ0QCoVy8TNkQD2hgiuNlQga4sCcp6Xhp13Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGIS7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2cA/9Fss+XP5OYJQsGTucuEHuwGmnXlnpzhn5Be3rtBwLNTJ3QU85\r\nS8R+plMqwczJDbQmAz1Kn7L4FSGn3f3Zf29DJAzIDnNBnfFiRhddOi0l+a/v\r\nDDMI9Te/BJ6Hv7q18S+dOhZ+Ye/mPvHrA+vqbl0kulnc9I6htVa/PF2ujEyy\r\nf2Yu+6RV9ogMsBOiURoHoi8sk2qBHui7LsTN/pmVaL9uI7pK5AyESAASwPAs\r\nwHn1gpJOlmdImRDGXeQfLzA2iyMOLb2cnqztjX+WFOn5usI1iNLV718K1XC/\r\nNEGQvydeuyk0YXd4LFbNY7Ev8ZsDRkhGucuuBJV8YrTLIO/veMGcGd+TUSIq\r\nhs0bebM7SehqQs/PzLLfWqCI8oSNCxUN6ZW5IC8KzoEIhNanqggzihLxp99w\r\nOPM/Cc+yCPG4DImLkuW81VTpSgHMUM3/sT9vZ9S3Y/MrTapM/5LH2NzSejmm\r\nj3oo/XdbIc0lOuxDSpWq6jtRdnID5cdIH2t4rAYxJM7YDGqCmrRZmbiYFYHE\r\nKe5TB0//lkETQbpqJJsrCYnGsojEhd3iCjScA85zALSzHqrJcgXGlF8kDPTL\r\nSTxH4NWddv16GOSDaeyRCk0jqOVvlSPMvq+F3H2QiE1mni7kkreZtx/qery7\r\nkzBEs0gb9BbGROWJcqADbKW/tEd+lXpu3Ss=\r\n=BYAr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-371935cd230927d3d54a8fdd21d11deb4f5d423b_1679328443356_0.17467693044234145"},"_hasShrinkwrap":false},"0.0.0-f0d89df88f7af78d802ae1a2ab6ecfc8b5af5a5d":{"name":"react-image","version":"0.0.0-f0d89df88f7af78d802ae1a2ab6ecfc8b5af5a5d","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.12","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.0.0","prettier":"2.8.6","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f0d89df88f7af78d802ae1a2ab6ecfc8b5af5a5d","_id":"react-image@0.0.0-f0d89df88f7af78d802ae1a2ab6ecfc8b5af5a5d","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-MXfgTYwBAUDTBtoiBykZZe3SdSpe8yBlB9Ca6Notg8FOjno5ZC33C57tuj441wn54BbVQl89trqWm0LDKcQkCw==","shasum":"e9e330bef2d80ca2eda5448835944af1ff14844b","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f0d89df88f7af78d802ae1a2ab6ecfc8b5af5a5d.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZCVkSYoMcYjPQ2N9rbP1kmievq9hCJaDMSRkHOEIjKAiBHsCH5W/VSU8YhT3yoIng2lImUtb1RiMk5eIzHz+Cqaw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGcp7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpz+w//dMdqH0pDy7c/x4IHTOWlwnlpruB5AvirS0vGeOYev78iMPCP\r\ntP8l+8sQjNBmjOGJhbKM6TXwgcRuDrYDC6Sr81eoTbs5NK9Hdz51JqIakJgT\r\nPiqKGuvdBYlS1OqZpReg06RwZB5umLBKm7rW8CyzcTdskCFeGyyYMQyJVO4N\r\nAXHA+yCMULHafPj0NdrTiW8VdUUvek0KmU9dAp9AnpImgNdBLOPnuXzzcmqJ\r\nUFnHVCINhXNbVkPiq+56Z60oIZIMQYqBEyjCKIPfdFTbyPHRXjvzjy+2nSiK\r\nNuc2gVe5QjO8mHCzYFTSifXvbSGQIKixrT+Ki5C1B/i7SBopIseHToBpri/E\r\nJ/tqMVZOrdyt59k1RAMd+qiSfvQvPir8zGuAsZrGwvCLVzZzb494GhltDUln\r\nCnOS1OXuS3dpJ+4QSaLmYySaL2S2c1+B2foQpZFJOLSeC6sN5rUenFOVx4jq\r\nDLAxI/wlcpvdZJoKu7QP1TP/MR459uU85oJFHnwqoxz+j0pgkMifWhklD/KB\r\nB0xNuK388b2j6Ab0+dfaj/BQLtvMuyW3xtj5l13auKVWXdlRoo5Z5jCI0aMX\r\nxLSi5EO+w9LdVCOqB7M5WbdgxeqpO3ntEL0nBbU5mYntpJs6Nm62+5nMAtDq\r\norU8C22h7ejTXAlOFIf1vSOUtd4mhOB1HZ0=\r\n=9s/v\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f0d89df88f7af78d802ae1a2ab6ecfc8b5af5a5d_1679411834916_0.8788212568943516"},"_hasShrinkwrap":false},"0.0.0-0de78ea865c46bc29c4542b46415fa180a77fc91":{"name":"react-image","version":"0.0.0-0de78ea865c46bc29c4542b46415fa180a77fc91","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.28","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.12","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.0.0","prettier":"2.8.7","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"0de78ea865c46bc29c4542b46415fa180a77fc91","_id":"react-image@0.0.0-0de78ea865c46bc29c4542b46415fa180a77fc91","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-uQ2t7hTflrkwvYFfJkSDLnQcYukcNOiHTkMmR1fYGbXU+lJmnJxbHbusC7cgkBg6sYCbma3/lt0qnJkY+qYLVQ==","shasum":"4d359694e39134f73818f5fd74f544b37756b919","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-0de78ea865c46bc29c4542b46415fa180a77fc91.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB9CTl4uRI6ob8BbRz733I1bpezGJMJ46xHWYlYHt3swIhAJ0wiGdIWOXQT4TC7WZc+BNeuNvuSRTDmkrOtXWsvMGr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHbZ1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZUw//dfo9NB05VIBPvVmVc6MbEwXZXEPFGaTgmiMQlEdKFzHJW6Ai\r\nshr8wq3e0U9+mr2wnf7kV1tfc13d50kapiz8VYpEs/g74O7ahYtXTc0KXODW\r\nZzhDYHvk+ahdsGPycCWiwEC/V8DQDkpFmOq1OGI+tnG1Risq3QNklf8zdTi4\r\ndny7bIyP+6BmMb0G3wGtYLSW1sXFmA24Lvy1X4zq9hFUlf4n9FWJVgkTjZ+8\r\n8aJc3q2Pn96AUGjgMNBD6iGxhGx7hWDBPlvRUkcXblkxcxNYVah9N15Z65Xp\r\nPzZAQL2NVzaaPDRdIOJMcrz69iMD/ztuzJeuk3eqIQhhlnjGmqfEyJiuPIHS\r\nY/Mic3n0zSf5ZXE7r+DhMxCW9fcbkdzY6qyA4d0K/R1SZS+1nD7qx2Q3ZS/Z\r\nB6RGltmZMnQ4imZOGLt8w3TRr/B9GCUuMEUXT7BvdKSocXo1JikKKfKtKyq1\r\nAzBZuUFj5p0/RdaWkGikpl80rZGfvL0wxPuPhSXz0HsRdJ/5/sF1NDtwURNy\r\nbrNPMYQ0ilv6Aiyn6xUM1iPyLvvLGWWPrBNZPEK9jspVfmV11vWjj4Wsoy9n\r\n54WOrVcxcGa7khQ+cySK/RdEC23TxKW0PwG0ZSnCIalZIlXk1C+Uxrca7ZDW\r\nOgzP3YroxuG6lvcpqVHqbAmLIb/aK0+FP5s=\r\n=fU5U\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-0de78ea865c46bc29c4542b46415fa180a77fc91_1679668853625_0.7184437286993972"},"_hasShrinkwrap":false},"0.0.0-cacd38d798ffa1891aa6d9bf34bf45cd7bcc8385":{"name":"react-image","version":"0.0.0-cacd38d798ffa1891aa6d9bf34bf45cd7bcc8385","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.29","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.12","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.0.0","prettier":"2.8.7","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"cacd38d798ffa1891aa6d9bf34bf45cd7bcc8385","_id":"react-image@0.0.0-cacd38d798ffa1891aa6d9bf34bf45cd7bcc8385","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-qIVgq73Du+mvD1aV2dmAStPp9kvtfxAZtN0nqPTYYN06X4wYm4t0CYxHS8RXh5hdeXNlCJfVCQUG6sLF2+R8UA==","shasum":"13e57f83049628702e1c84b24cae3fa97dfec33f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-cacd38d798ffa1891aa6d9bf34bf45cd7bcc8385.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUBM4TYzkEBnwn/WEFCaLmbcpokvPjL7xhBMZypfhqlAIgIE/M+oYLhzPoo370Bbeky9NTW3q68jidEamxOfGmfFE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHkC9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxpA//YRVTsHUwSItMD8CEUc0K5+MyVs4s89QW7hUM/1OnOBtAaHL+\r\nOQOeyXF4JpkLBLrEn9JR57/y3uliL4scqmO1kujwZdKOfU6ay7B48QlBXzZL\r\n8mTs3lHt4GjoM+XqEuONZjtFu//f9mJwRv2Wfhn2UQ3FkX0o7lXY77mZQGaP\r\nRbomFpBFCGzS5M6oRAYItz6etZ3owvkWYWlpjlfoxeQwq+5Ut8vVYuBGvPu6\r\nUI4X1ZlUDj0i9JAWaRDI5zBKHyYxd0Pr6xS0HM4Igs3HVaU39/LZ/LKy9Vxi\r\n08umom4+Gp1J+o9pcoaW/8w+jAdlbU9GqE9l8amUHPXihdgsq2TvrIQtR2FU\r\n/nXOE1PPT47OY9LA7Xf1z4wNxGGSVePtcnAzaSl7xV43f+7HKgfzhp1okBiT\r\nykFieI3bo+oiG++LUJNypDBQfPi3uFcrGwbbzAf694Negsxhn7Y1ntYjiZuT\r\n2nq6+gBlPs9FeI8RHdujF15JvkV3sTbWeYBR3mOJ/hOYlYEFGgNMe3Zv3PJk\r\nFvzcCC34R8M+5vjlApHl3wcYf03zff1zPujg0WNzpihdtZmkirr10IKGpqPr\r\n3NtFgPg2wF6OgeL4D+AHAifN27dcISBN6z9igEGIGxTCfbt6U9kHoKCPVSF/\r\n9HEEUtXNaSjY/IkKEJ2wm2BSSOvFrDKWAKs=\r\n=gyDH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-cacd38d798ffa1891aa6d9bf34bf45cd7bcc8385_1679704253066_0.047669154374808675"},"_hasShrinkwrap":false},"0.0.0-d9de5cce1d7c67b7ae3b1cd9ce5c3d0e96d83b4f":{"name":"react-image","version":"0.0.0-d9de5cce1d7c67b7ae3b1cd9ce5c3d0e96d83b4f","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.29","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.13","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.0.0","prettier":"2.8.7","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"d9de5cce1d7c67b7ae3b1cd9ce5c3d0e96d83b4f","_id":"react-image@0.0.0-d9de5cce1d7c67b7ae3b1cd9ce5c3d0e96d83b4f","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Jrzts4Sr3vc4Gj/4k6R0u88Gi0qjEcyLuVsVI3bVmmfgGtNO+w1sWDqZVlqwITaeetlP3ygRHH233hBatOzbwg==","shasum":"820ef777da2a110fce30d6dd88edf9e9f7a02d7a","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-d9de5cce1d7c67b7ae3b1cd9ce5c3d0e96d83b4f.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBBVQTxYStotqzL8eLkVeXhaVaAxXDxsNsEiKLIc21HmAiBS+hXTORUGtVI8pTVJNEw+C8pyJnsNKWioRa20QNoA7w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHmFMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrz7Q//aK5+bKyCxEXvG7RnoQZ6c++VO7lUfyOWMchyZ6z5Mk7fYjyr\r\nHeduK4DgcS2j0p3WGtK9e0y28i+qT+dI/qwPhujijOvsUi60nqSQ52fas0a0\r\nhRlCsu6h5TnYR6sAtKMCDnBrLBACsCCM+2tfJmHcHxCspUR+c2zbe029x3ja\r\nPXky0ZR/SPyAP3To8y1rZwnLWfSOO+53KpnAVqbjwrMYRLP/jZ2zhzMFeFiW\r\nClUM8AbnVIWkvRc1hIfkga7DxxPQk/5aCpFLym3lKKAVAy4ZwXemvQt1+I9/\r\ntsIfdNzuDJdkGPhj9Ng35ZDlIZXAgimL2ruE8OpE+TIPJFpFbQZC6Q3prPur\r\nQB2u/rmRFXHjL3SAzri9i5UzvGiTX/L3OkIQ4Hsr4+utKY3y4zEgUMxK9pTX\r\nebyCXBwsIyPk/cKG+7tMpVaDNI91UKUl6j4afSgNEBv0oxWH+xANJ3YIQWcW\r\nWtpJGDBPfoSOp9kN3SSlO2j64E7hGgFeZfUPcRyhEcNj+//FK82EYsFZFtFD\r\nAJk73sHFoz42lYHf86bNUhadcMVHp4qH/4d0+UUB9Z5ptGRciTSKEM73KKtW\r\nKsJafYXpL/NXJ7nI2ZFORrTJew8/S6xlBe+75GdTGotrZ9AZKfy7zXtRLL29\r\nJ6PERqROeBvNaWC+9oe9qLThtQPLmWi0brc=\r\n=l360\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-d9de5cce1d7c67b7ae3b1cd9ce5c3d0e96d83b4f_1679712588186_0.7799406568034533"},"_hasShrinkwrap":false},"0.0.0-f301c305854784cca787b37a49462dd35c978856":{"name":"react-image","version":"0.0.0-f301c305854784cca787b37a49462dd35c978856","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.29","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.13","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.1.0","prettier":"2.8.7","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"f301c305854784cca787b37a49462dd35c978856","_id":"react-image@0.0.0-f301c305854784cca787b37a49462dd35c978856","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Jz2YvKsK30js78oDx1Ixbd6dq6EDv5uaVLkRv8NiWskIDKzUQx2DVMpeMsQPpWMvLguUvAVtVqGtrwhWVwkrdg==","shasum":"102276aa0be03404cec488baf15d43d22aab69f9","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-f301c305854784cca787b37a49462dd35c978856.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVtnuDvYIuvphIPhFGrL44VyVE4kD7+MlCpNFh+SvcPAiB5/iEoAaYfAqs2kf6lhWNAWAUaINLyr+f9jZ81sGOoqg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkH/auACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHIhAAjSSy2gmdaZjvcKWkqvjFQUdTRN9Nc7iwcKA+DUugo+7bQ18d\r\nZ7qqHMXx6yw0qRmfFqxx8BxelmaG3v1qYsQs8tksU/AafAqD+kbfPd/eTvJd\r\n5SZ/TE5mDYEpS9CB+WXc6myD1nKgW7PyziZjjxXFSErxo8CNbm+iLFXG1bOe\r\nq5mmX8YVr3Lvm/0l5Xt3ckjvf6z/8QPrdZpj62ka5GZ0mg1bZQINNlQT+hF/\r\njijtL9+43DaaMUhz77WNphQqFlEvY5YsuRObFFH2bUAhMMuQVwK5OGMzMpZ3\r\n62+YLDaIIg8C3a7Ud5nHz8F8R+iozgJ6gwLA9JzAahBPHXK1kpVKs0F4ozfz\r\nr3LJavEZ/sCE6atlZ2AlzJ7Uwa9AYEp2xmaXIjdRf9146K6+qESGECCeF0o+\r\nOvR/cep6Qs9vHUQNquOX68RuGGdSAvtXV+Oedis7kndrZHDfjjWOdgH5dxnN\r\n6FIo6wZYOSXL6k6cfABmRosrSG8ufAtyhnv97OLKNcjfNhPAsC4JN9oFTv6N\r\nhOiaNL6+fJcEw/YSAJjDXeskPbbh6ViM8k9j1ksryAZ+PIi2fbF4mtv0uMVt\r\nv602hzTlLZrMKAvI1n7xDbC+cEGO5RPuMeWigRv2ofeOxfvoV8bLmA0Xu5zX\r\nXBSR50ELFD39bHG6ioU9kWJbsMitYnOtDXI=\r\n=S8SB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-f301c305854784cca787b37a49462dd35c978856_1679816365892_0.16090924661436912"},"_hasShrinkwrap":false},"0.0.0-471994233098594a8b231926ddef6f619f7e40ed":{"name":"react-image","version":"0.0.0-471994233098594a8b231926ddef6f619f7e40ed","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.29","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.14","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.1.0","prettier":"2.8.7","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"471994233098594a8b231926ddef6f619f7e40ed","_id":"react-image@0.0.0-471994233098594a8b231926ddef6f619f7e40ed","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-fn2pSHe8Zu1HQMG2TMcj5frEvhxHa3rv72dA/YKfeuDVbCxZ4d/lbilQ1oEry04X8i4xmJbQWMl1Siwn26gb6g==","shasum":"022b02a87f4c6e9fa252256f5ded1fc9fdf3fae1","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-471994233098594a8b231926ddef6f619f7e40ed.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDY4jb8DlxOcFa/SIl4kOeAky5les0rtaoJUVxzfHUrPwIgTRQUtX2zEcJN8Qj5CtTLTJBMHQRT8btwiDifg8Bf820="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkICihACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZgA//dowwMjsbZlOA9JR3xbfbtDpUixHclAkOGe4GcSSm3c9qTcVb\r\nSfVOr4AC1//IvGryzmNfg/HppPXPb2WGJIiPehpfpayb1PcjXfC90mN5mi1e\r\nS42cOr7EJaKl3riwFz7BMzkBdyJtZLeEUdfdqPCHHxbUXHbVMPWKn+9ym0D/\r\nBIRSFroHJy9pKrUoqCpo+PUrpUdhYEblxTosrMECEL4NCFU+16eVbTooTTq3\r\na2QVMPhnyDwFhFaY4WpAFTM0yvMpiAZjeSSmo3lF/S6mI5VMcbhF0unk2Ljy\r\ntna3HYYHSBmyEJrOLbYnYHFZwjBWMHfhtQenvyVcZfsXLlGrylxm9k4PPlYH\r\n4tBVifSEsCOVEclthpCNoy40H0M23UX7AA08x5X9+Xgrrqk7UYnXozE7uVFX\r\nUl56LeJR/wZM2Pw3j6+EEdmGgtGQiBI5051H5SYSR7zFDed/UW0ROBvNW42C\r\nk1r5eGeR16OpRx0frb3v3FvMJ/UMOjOV4KHPOQzLV8DRUmAsr9+GDRHS4EvN\r\nmgpnQpJyNzO89Wq7qv7MaNf5Gl3WGn+HDDatd93qKHS7NaE0tPXTpn46AoLj\r\nkp/SNmedupa7nn7RTDC97eU50t/yUCy7xD2k7ewfAc24/UKWuTIlr//NhWon\r\nR7AJ40LOzkAHWlFTV2o2PPHhTZTzIAliU5o=\r\n=jdvE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-471994233098594a8b231926ddef6f619f7e40ed_1679829153543_0.9628989782053172"},"_hasShrinkwrap":false},"0.0.0-3041d66a2e999dd70ad1d215848d52d61b17d276":{"name":"react-image","version":"0.0.0-3041d66a2e999dd70ad1d215848d52d61b17d276","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.30","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.14","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","express":"4.18.2","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.1.0","prettier":"2.8.7","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","serve-static":"1.15.0","ts-jest":"29.0.5","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"3041d66a2e999dd70ad1d215848d52d61b17d276","_id":"react-image@0.0.0-3041d66a2e999dd70ad1d215848d52d61b17d276","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-umFFseDhocWAOBIC+KtegkaJvlZKwlZBY2nfSF9M8VZT0eljh3vbsfkZVJqVXO6sSG20iFamF1FTxxTmZnhhrA==","shasum":"5783c350d910fe398cbf01c346d7682f97f91c4f","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-3041d66a2e999dd70ad1d215848d52d61b17d276.tgz","fileCount":6,"unpackedSize":16794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfgMboBy6uaAWcV3nQdR0SfZzT07OJwjFOX/nNF0IlIwIgTmPOSCYM0qB0TuF5vvEDehEnK2XoC0XBpwY5Gm3qrYo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIikcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmmg//Z1fKw+uiHRHtyzQ+ZbEZAQtEsjfq+ulzDpvLSs5w79G2/Y3x\r\nHj1uMpmtK5GZFcviVtNq5DzA4cLQDJPOVH1n6FR5YcxA5Z6o1jAd1TO3qNsd\r\nRxVnylLsHjLEetZlbVTDL4bblJPvryi4OJRAMHVFzaZkzD/yrM+WZDSZL/40\r\nJ30n18pI2ukzaWMcBotHTyQVcaiS/JOnFF4cAJ028px5IAgyt07poc/1pnVO\r\nxTSaCIqzMtS2yzc7yLVsSfUJ1uoFzO9c+pnsA5O78vvxYXBGAu4zBtoUvi2Q\r\n6oqfYUzyHq64gBu1/m9A0YZxvczmYUba1MRhyGPXW2zecehUjvbClT03irwl\r\nqc5pVmT0lHNaf7Tf1h+LBm2XTAoKR52z0fP+xElNnY09iUbesLLuxP4CYd0X\r\no2ivaMSk6pMw/NP0nOE+BP/159LuQvk7ocKFZwvKs4ddRATUVfaQEVPNDYAh\r\nG1dfq67qOZ05W0i5wKv1dqjYlq+OgyxxlMdUHCaHx0XyE1A/3WlENxaLxBJB\r\nrsJ96TRP/X7Zojmfj2A+aXYSQJz5PY2qUXlRHgmR64XYE8xbk97OEwlKZo2G\r\n0ROJsXvfJL1BdyvjVY6Bb2/EafMuBlK3Ra9o1RE+UT9A77LSXMDyr4FguBjC\r\nygQp2OuoMlMp7jIRik718J6OatEZOaE8TyU=\r\n=tYIs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-3041d66a2e999dd70ad1d215848d52d61b17d276_1679960348197_0.5057411163344963"},"_hasShrinkwrap":false},"0.0.0-277ef34d3ca3c60af714717cad634da94ebf7bd7":{"name":"react-image","version":"0.0.0-277ef34d3ca3c60af714717cad634da94ebf7bd7","description":"React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support","scripts":{"build":"npm run build:types && node build.js","build:types":"tsc -p tsconfig.json","codecov":"codecov","dev":"node --watch dev/index.js","pretty":"prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write","isNewerThanPublished":"semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false","test":"jest --projects jest*.cjs","test:dist":"for i in cjs esm; do cp src/*test.* dist/$i; done && npm run test"},"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"module":"esm/index.js","main":"cjs/index.js","types":"react-image.d.ts","type":"module","author":{"name":"mbrevda@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"homepage":"https://github.com/mbrevda/react-image#readme","devDependencies":{"@testing-library/react":"14.0.0","@types/jest":"29.5.0","@types/react":"18.0.30","@types/react-dom":"18.0.11","codecov":"3.8.3","esbuild":"0.17.14","esbuild-jest":"0.5.0","esbuild-jest-transform":"1.1.1","jest":"29.5.0","jest-environment-jsdom":"29.5.0","open":"9.1.0","prettier":"2.8.7","react":"18.2.0","react-dom":"18.2.0","semver":"7.3.8","typescript":"5.0.2"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"readme":"# React Image 🏝 🏖 🏜\n\n[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-image)\n[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)\n\n**React Image** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.\n\n**React Image** allows one or more images to be used as fallback images in the event that the browser couldn't load the previous image. When using the component, you can specify any React element to be used before an image is loaded (i.e. a spinner) or in the event that the specified image(s) could not be loaded. When using the hook this can be achieved by wrapping the component with [`<Suspense>`](https://reactjs.org/docs/react-api.html#reactsuspense) and specifying the `fallback` prop.\n\n**React Image** uses the `useImage` hook internally which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.\n\n## Getting started\n\n1. To include the code locally in ES6, CommonJS, or UMD format, install `react-image` using npm:\n\n```\nnpm install react-image --save\n```\n\n2. To include the code globally from a cdn:\n\n```html\n<script src=\"https://unpkg.com/react-image/umd/index.js\"></script>\n```\n\n## Dependencies\n\n`react-image` has no external dependencies, aside from a version of `react` and `react-dom` which support hooks and `@babel/runtime`.\n\n## Documentation\n\nYou can use the standalone component, documented below, or the `useImage` hook.\n\n### useImage():\n\nThe `useImage` hook allows for incorporating `react-image`'s logic in any component. When using the hook, the component can be wrapped in `<Suspense>` to keep it from rendering until the image is ready. Specify the `fallback` prop to show a spinner or any other component to the user while the browser is loading. The hook will throw an error if it fails to find any images. You can wrap your component with an [Error Boundary](https://reactjs.org/docs/code-splitting.html#error-boundaries) to catch this scenario and do/show something.\n\nExample usage:\n\n```js\nimport React, {Suspense} from 'react'\nimport {useImage} from 'react-image'\n\nfunction MyImageComponent() {\n  const {src} = useImage({\n    srcList: 'https://www.example.com/foo.jpg',\n  })\n\n  return <img src={src} />\n}\n\nexport default function MyComponent() {\n  return (\n    <Suspense>\n      <MyImageComponent />\n    </Suspense>\n  )\n}\n```\n\n### `useImage` API:\n\n- `srcList`: a string or array of strings. `useImage` will try loading these one at a time and returns after the first one is successfully loaded\n\n- `imgPromise`: a promise that accepts a url and returns a promise which resolves if the image is successfully loaded or rejects if the image doesn't load. You can inject an alternative implementation for advanced custom behaviour such as logging errors or dealing with servers that return an image with a 404 header\n\n- `useSuspense`: boolean. By default, `useImage` will tell React to suspend rendering until an image is downloaded. Suspense can be disabled by setting this to false.\n\n**returns:**\n\n- `src`: the resolved image address\n- `isLoading`: the currently loading status. Note: this is never true when using Suspense\n- `error`: any errors ecountered, if any\n\n### Standalone component (legacy)\n\nWhen possible, you should use the `useImage` hook. This provides for greater flexibility and provides support for React Suspense.\n\nInclude `react-image` in your component:\n\n```js\nimport {Img} from 'react-image'\n```\n\nand set a source for the image:\n\n```js\nconst myComponent = () => <Img src=\"https://www.example.com/foo.jpg\" />\n```\n\nwill resolve to:\n\n```js\n<img src=\"https://www.example.com/foo.jpg\">\n```\n\nIf the image cannot be loaded, **`<img>` will not be rendered**, preventing a \"broken\" image from showing.\n\n### Multiple fallback images:\n\nWhen `src` is specified as an array, `react-image` will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n  />\n)\n```\n\nIf an image has previously been attempted unsuccessfully, `react-image` will not retry loading it again until the page is reloaded.\n\n### Show a \"spinner\" or other element before the image is loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    loader={/*any valid react element */}\n  />\n)\n```\n\nIf an image was previously loaded successfully (since the last time the page was loaded), the loader will not be shown and the image will be rendered immediately instead.\n\n### Show a fallback element if none of the images could be loaded:\n\n```js\nconst myComponent = () => (\n  <Img\n    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}\n    unloader={/*any valid react element */}\n  />\n)\n```\n\n### NOTE:\n\nThe following options only apply to the `<Img>` component, not to the `useImage` hook. When using the hook you can inject a custom image resolver with custom behaviour as required.\n\n### Decode before paint\n\nBy default and when supported by the browser, `react-image` uses [`Image.decode()`](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode) to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the `decode` prop to `false`:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} decode={false} />\n)\n```\n\n### Loading images with a CORS policy\n\nWhen loading images from another domain with a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), you may find you need to use the `crossorigin` attribute. For example:\n\n```js\nconst myComponent = () => (\n  <Img src={'https://www.example.com/foo.jpg'} crossorigin=\"anonymous\" />\n)\n```\n\n### Animations and other advanced uses\n\nA wrapper element `container` can be used to facilitate higher level operations which are beyond the scope of this project. `container` takes a single property, `children` which is whatever is passed in by **React Image** (i.e. the final `<img>` or the loaders).\n\nFor example, to animate the display of the image (and animate out the loader) a wrapper can be set:\n\n```js\n<Img\n  src={'https://www.example.com/foo.jpg'}\n  container={(children) => {\n    return <div className=\"foo\">{children}</div>\n  }}\n/>\n```\n\nBy default, the loader and unloader components will also be wrapped by the `container` component. These can be set independently by passing a container via `loaderContainer` or `unloaderContainer`. To disable the loader or unloader from being wrapped, pass a noop to `loaderContainer` or `unloaderContainer` (like `unloaderContainer={img => img}`).\n\n## Recipes\n\n### Delay rendering until element is visible (lazy rendering)\n\nBy definition, **React Image** will try loading images right away. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as [`react-visibility-sensor`](https://www.npmjs.com/package/react-visibility-sensor). Here is a quick sample (psudocode/untested!):\n\n```js\nimport {Img} from 'react-image'\nimport VisibilitySensor from 'react-visibility-sensor'\n\nconst myComponent = () =>\n  <VisibilitySensor>\n    <Img src='https://www.example.com/foo.jpg'>\n  </VisibilitySensor>\n```\n\nNote: it is not necessary to use **React Image** to prevent loading of images past \"the fold\" (i.e. not currently visible in the window). Instead just use the native HTML `<img>` element and the `loading=\"lazy\"` prop. See more [here](https://addyosmani.com/blog/lazy-loading/).\n\n### Animate image loading\n\nsee above\n\n## License\n\n`react-image` is available under the MIT License\n","readmeFilename":"README.md","gitHead":"277ef34d3ca3c60af714717cad634da94ebf7bd7","_id":"react-image@0.0.0-277ef34d3ca3c60af714717cad634da94ebf7bd7","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-BrIcnu2R/CUEQ3rsqej9u96IJFBBvanitMf/Ku1FkzKqCdeHzPdWGA94hnsXIKbQ+hTK+Gomsa9Qx01FZL5uhg==","shasum":"f21b21c7c83f31656d2c8fed8cc9130ef306d039","tarball":"https://registry.npmjs.org/react-image/-/react-image-0.0.0-277ef34d3ca3c60af714717cad634da94ebf7bd7.tgz","fileCount":6,"unpackedSize":16722,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjMBzCnj3jEgrVDvCBXhpvYy8KGUmn67YRPU+dOlGunwIgGqYGMUEOXzjKsk7ksdLq6HERQkF1dXAEF4wgLxgT634="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIv/nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqguw//WIFn24h2IqpOTSVtKGxO38i2PSfr25QS7tMAf6qu2jQFVjH1\r\nxoUDC1GAPLFSk2JowWcJXs7pL2SsAzA4Xsy6YikAoHoXGB/Q6vDkMTHq3UXu\r\niJCNnlcUT+nEPE7W0efdxQl6CFFN6ZAn0+p7vTRGjBrC+qbujYXA9D5qmJxC\r\nuVK+/cCMLoX02hFpHWxEgslKtfWxgz0WsEOEuS2ZH24ihHlqwaSlJWew9D+4\r\nPLggZPDZFBl8Pzemr53wDRr+YfekDQ/syAQ4P3cHY0Aote2BHduhr+uqaq2r\r\neR25mqYOuUxFwhkBhO5PZmnWZRycgGC8gyPSB4iqXjiQbtRvO0Zs/YSrNZyK\r\n8hVg2/YOhLJ6/h5lXlKoRokGurJK+iYA0ITZtQjMtrv7WgPgaSLZ8raWnfEv\r\nfvBg7RmuuAdkF5n1Mu9Y+Bl212RrgkOzJGyYaxuanfZ7U/CxHSn33Xr7RTey\r\nz3V+7NDDyMxdFKFw/g3UuvS4Q1tOk/33A5ozv5MUUuGNQ0GugBlkynz9Bli6\r\nU8KGaI8r2k7EaSUV9Yt7hRq8bRlc2Kqn9c7l1518svRnN/7bi+DqSrCekpRV\r\nv6uFBNi021xCFvj+MR7kNErfOs98lmWVbaor5DUvEaUuM2IvjZcP0BEp6jgX\r\nspxzMLF9UCphKAF6etC7aQouP+tN9AfZ2do=\r\n=neWT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mbrevda","email":"mbrevda@gmail.com"},"directories":{},"maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image_0.0.0-277ef34d3ca3c60af714717cad634da94ebf7bd7_1680015335102_0.9493670303582911"},"_hasShrinkwrap":false}},"readme":"","maintainers":[{"name":"mbrevda","email":"mbrevda@gmail.com"}],"time":{"modified":"2023-03-28T14:55:35.399Z","created":"2015-02-14T15:31:26.492Z","0.0.0":"2015-02-14T15:31:26.492Z","0.1.0":"2015-02-25T15:04:49.412Z","1.0.0":"2017-04-14T11:50:47.488Z","1.0.1":"2017-04-16T14:08:39.469Z","1.2.0":"2017-10-29T18:14:31.264Z","1.3.0":"2017-11-06T11:35:07.395Z","1.3.1":"2017-11-11T16:02:12.352Z","1.4.0":"2018-08-03T15:15:30.201Z","1.4.1":"2018-08-09T09:27:08.182Z","1.5.0":"2018-09-25T17:47:20.247Z","1.5.1":"2018-09-25T18:00:56.205Z","2.0.0":"2019-01-13T11:28:12.269Z","2.1.0":"2019-03-24T10:38:29.862Z","2.1.1":"2019-03-24T12:57:56.814Z","2.1.2":"2019-06-04T19:28:05.073Z","2.1.3":"2019-06-05T10:46:11.397Z","2.2.0":"2019-08-19T07:49:24.455Z","2.2.1":"2019-10-12T16:48:50.190Z","2.2.2":"2019-12-16T15:10:10.682Z","2.3.0":"2020-02-05T16:02:00.315Z","2.4.0":"2020-02-11T16:39:02.606Z","3.0.0":"2020-05-13T12:29:28.554Z","3.0.1":"2020-05-13T12:39:07.542Z","3.0.2":"2020-05-13T13:03:09.231Z","3.0.3":"2020-05-13T13:08:12.726Z","0.0.0-c43b70e7007d310b9474f695d88d81c03377ee68":"2020-05-14T13:28:18.380Z","0.0.0-f337c09b61ae15806066eec143400f8bbde9ac7b":"2020-05-14T13:36:15.596Z","0.0.0-f041bc82bdb574978decadac3cce8cf85539edd4":"2020-05-14T19:08:33.193Z","0.0.0-3439b42e040cc9fcdf755d3c9f66efe5d38435b1":"2020-05-15T05:31:04.804Z","0.0.0-c6693a0968810b05ef63a1803ab3fab2f8beeb92":"2020-05-16T08:25:40.081Z","0.0.0-a68dee8bd3ed207fbc6a2ecb87a4036a2ad4b1b2":"2020-05-16T09:51:56.619Z","0.0.0-bfa64e24ce0bad5b8e2fdaea752386cc14bc8a60":"2020-05-16T10:27:00.291Z","0.0.0-315448693ae54d2e522c94ed6da0e90caab8f91d":"2020-05-16T11:55:28.366Z","0.0.0-efcc53f1f4101a59c0a7cb4e8613af55f4affd37":"2020-05-16T12:58:32.986Z","0.0.0-32b4c1f7b2f8c0bf6fb025ab3875b6b77914344f":"2020-05-16T13:17:58.803Z","0.0.0-ba94086c7c5609bc367cf45cbab9fd98843b8ed1":"2020-05-17T14:55:11.793Z","0.0.0-a23ffa80429d83f79d40e2ab2c4b4189b692d8fc":"2020-05-19T02:33:14.088Z","0.0.0-704a609cd5408d5ebf9521550008d5a7fd06d369":"2020-05-19T12:00:16.742Z","0.0.0-9442ffb641a2eb8b8f01fa27b49fe0f96ce72fb6":"2020-05-19T12:11:39.527Z","0.0.0-4e79f5a4063c2712de1756c65ebfa6cfd8bc36fc":"2020-05-19T12:52:32.489Z","0.0.0-29a40f8517d0a41ae487c18ba758267ef1299945":"2020-05-19T14:49:05.312Z","0.0.0-fa9bf72e183c99355bef7fced71637b8de83160a":"2020-05-19T20:10:20.474Z","0.0.0-b68577cf09e02d92c486ad38fedaabf90696164e":"2020-05-19T20:20:56.217Z","0.0.0-214293e333c67a6e28f5fa8debefdf347f8def92":"2020-05-19T20:25:46.699Z","0.0.0-0b4fb07c22c50f6f5a39d401005c67aaafb1e0f6":"2020-05-19T20:29:06.487Z","0.0.0-f2b9228a5b92389cd9dbeed21de8f95aaa89e059":"2020-05-19T20:33:18.452Z","0.0.0-06a9b7b651e573686e1ad5b456949d83fcfb8c2a":"2020-05-19T20:37:38.465Z","4.0.0":"2020-05-19T20:44:46.550Z","0.0.0-cc03d5f88894ef9d0eb54f0f41f21ea42d1b8c30":"2020-05-19T20:44:51.265Z","0.0.0-8d96049eb2d0461afd3850653db1857ec09791bc":"2020-05-20T23:33:24.039Z","0.0.0-eeb326da38fa2deef7125fba86df600e436d3f66":"2020-05-21T00:40:39.850Z","0.0.0-bb61789efa67f0703e3b35f9fa90e55d1126a4c5":"2020-05-21T01:38:57.316Z","0.0.0-95facdd820785929306c6444ed8e4c5f53be8398":"2020-05-22T04:56:55.975Z","0.0.0-3ed8b42f51070ddabb3539cfa98ad9d86cab186a":"2020-05-25T08:31:46.675Z","0.0.0-9569374147393627af58c7a3df1dc29f434bf017":"2020-05-26T12:51:28.290Z","0.0.0-4e7282e6768ebdfe73f2952ab186e792bd0825fc":"2020-05-29T01:36:16.000Z","0.0.0-4f07d8336b307e407ae58d56f64e0448f2f32129":"2020-05-30T05:01:53.070Z","4.0.1":"2020-05-31T05:15:51.268Z","0.0.0-30e5ec5278691295a548d3c1617ad9e033627bd4":"2020-05-31T05:15:56.053Z","0.0.0-3b911b112ec2b368a9b175303eeaa2e401aba799":"2020-06-01T09:27:43.952Z","0.0.0-44dbc0ca601f6a00c6806a8b111e69ff599557a3":"2020-06-01T11:01:08.587Z","0.0.0-ad884a93c04bf7000b837a6bb6b03a66ab900564":"2020-06-01T12:52:52.771Z","0.0.0-42be500666eb994bcb2d5e0a82a1289432c734d9":"2020-06-03T15:57:22.987Z","0.0.0-ffe959bb365e4b367a4af9e35906d8fcb7cfe2a6":"2020-06-05T06:49:25.448Z","0.0.0-1e281bab575d9b288f1b37305da3a3d8cbeddda3":"2020-06-06T09:25:56.367Z","0.0.0-4b1461adce9025d3a6a2afd2047937894ecc4c99":"2020-06-07T10:57:09.469Z","0.0.0-208436379c9997ff563ba0775624ad7ca3814906":"2020-06-09T07:30:56.774Z","0.0.0-8dcafd1b8b8e054334891c790215dac895ef66c2":"2020-06-10T20:43:36.622Z","0.0.0-22c4efe53e8d6d2ce94dd56ea913186483f4cb73":"2020-06-11T22:45:01.619Z","0.0.0-5a8d5ef5ac93db564f9307862b0b0927546b3f57":"2020-06-14T22:51:46.437Z","0.0.0-072125dbc001259d9867cabc7859107aa6ffc05d":"2020-06-18T17:57:12.232Z","0.0.0-1119d4b5f7ac0041eb6216bcbb7acc80691a565f":"2020-06-19T20:43:13.923Z","0.0.0-4d21b65770eb5df56a0ec137d0db809f08ba90ff":"2020-06-19T21:26:18.145Z","0.0.0-6737d7118cc41c282fc40e6f53f9a75eca7b16eb":"2020-06-20T23:52:09.925Z","0.0.0-1650150386a757ec6a16d41046071554416c1f24":"2020-06-22T02:41:38.175Z","0.0.0-bfa76fa3ab2e13186f8e35eb5a020a5aca4d2011":"2020-06-23T07:35:03.079Z","0.0.0-ddd30f342805d8ced83d7b332b077cf047d11976":"2020-06-24T10:20:26.823Z","0.0.0-5d9f2db2d0deef3ced88c617b194eb0bc5b06980":"2020-06-25T13:45:48.035Z","0.0.0-e15e7873bedb7deb4eefc0203e429416415d7f9b":"2020-06-25T15:26:17.452Z","0.0.0-730aa4c1937a3b4cd5cd939e6508243a45a451b8":"2020-06-26T17:02:18.396Z","0.0.0-938b211c9ffc8ec7de82051abb5c226885cc221b":"2020-06-26T18:48:36.951Z","0.0.0-4e9907eced970e984b8e676ae10a343adaedd3bb":"2020-06-27T21:31:01.358Z","4.0.2":"2020-06-28T04:29:40.897Z","0.0.0-8791d79c5d07bf91edb3fadf46e95fe9c1db205c":"2020-06-28T04:29:45.715Z","0.0.0-e4dbf4d2651b79fad556f54a3b2c595f56676671":"2020-07-01T14:35:53.175Z","0.0.0-305e8bdc7323238f839165a57f498fed3c339abc":"2020-07-02T20:17:19.465Z","0.0.0-961c5036173f7b754a3d5e66b8bad7be9b1bce59":"2020-07-03T22:56:09.431Z","0.0.0-16f0fec21121ab16c9c5d2cf0df88908ee61c8de":"2020-07-06T07:28:49.763Z","0.0.0-c0288d4f3fcdc810a7c4bfe9a773df28d9f6a6a5":"2020-07-07T09:18:41.112Z","0.0.0-f2991485074100bd2bc15bceb6de2054e8ca4119":"2020-07-08T12:40:54.150Z","0.0.0-f5b962b84aab31f136d0485ed2d20f24514b2c3f":"2020-07-09T16:52:48.443Z","0.0.0-5c3c0ce2bda72046f8b87641680c0b4f90cdcb14":"2020-07-10T18:36:16.434Z","0.0.0-576900502563b4fa9cbbdc5f944d82ae20414d92":"2020-07-10T19:31:57.560Z","0.0.0-db3a39124701bf9071d83ef7a566a9beee021fe9":"2020-07-12T22:09:39.494Z","0.0.0-8c06c3ab833c37d82ad8843834e81c0edea340cc":"2020-07-14T13:58:31.327Z","4.0.3":"2020-07-15T07:56:09.367Z","0.0.0-cfb9b14962423a860395fba28680e5817642a331":"2020-07-15T07:56:16.686Z","0.0.0-81f6e7cf6b4d96b50dcf420c2d1afb5bc6ec855c":"2020-07-16T09:29:03.490Z","0.0.0-8561ba5f18f1aa2d364a069f8875cd085ad0ec58":"2020-07-16T10:56:37.256Z","0.0.0-9c2ccf1cf9431c25c186e12799f5087d0d1ee026":"2020-07-17T13:47:37.200Z","0.0.0-a2d0d9b474be755a74d70d9b24c53b68fff13b60":"2020-07-18T15:06:16.390Z","0.0.0-e5c2a0b996a2bd11f9aaddebba8f8133acb2215c":"2020-07-18T16:08:36.786Z","0.0.0-4563ae7aa96c250f7f6ee469f650ed71b96f05f6":"2020-07-19T18:16:52.965Z","0.0.0-e618ab41b264a6c54a4926e0dce454c9436825c1":"2020-07-19T19:10:24.519Z","0.0.0-6615558c01fbfeae48d707e8570a53166661d75e":"2020-07-20T21:09:30.415Z","0.0.0-8ee9765d41ce347346502e909b5ece4c67e3c1c1":"2020-07-20T23:12:09.406Z","0.0.0-9fd170617c6b9d3a9a6bc5f0aa10734c9f984fcb":"2020-07-23T04:34:39.172Z","0.0.0-46140b07887c95dff92c65ad5895e169d5782721":"2020-07-24T20:27:48.762Z","0.0.0-a6695c438d9ac988804049c595f635cdd02bf8bf":"2020-07-25T22:34:16.329Z","0.0.0-314d8d31cfd4fd257f4c547dd2cf26cb6bcc7f4e":"2020-07-25T23:19:04.329Z","0.0.0-e3dc7078f0e25e3cd24bed08a0efa567769db218":"2020-07-29T10:44:43.076Z","0.0.0-9c79f7d88afebd86bd8cb7de58142f6317f8bcde":"2020-07-31T10:20:40.146Z","0.0.0-151650ce7ea136df25e10347c43b082b172bd566":"2020-08-01T12:30:36.429Z","0.0.0-10d0a256288c8a7e6743f708e537da6b727ce5eb":"2020-08-01T13:20:13.512Z","0.0.0-43466d02bc2416861e8f482782b99ec3dc978f8c":"2020-08-02T14:24:30.387Z","0.0.0-b9bafcb20ad93c9487f584309587360b2ac16a6c":"2020-08-02T15:30:53.915Z","0.0.0-ef9913c317018dfcf559159133efe332feb25903":"2020-08-02T17:08:33.917Z","0.0.0-a6e564b15d8e6e862dc2ec7dd2b3a99ddf191f99":"2020-08-06T04:39:41.637Z","0.0.0-b77ddbb4ac3626b214e01e0196e36d3d1a3c538c":"2020-08-07T06:15:02.343Z","0.0.0-546e16bc6ea5e4465881ff788640fc0c99a4ac6e":"2020-08-07T07:35:55.886Z","0.0.0-9827098f0e210eb6571926ec5de57c28b22cc3aa":"2020-08-08T22:38:05.578Z","0.0.0-6c43eb17dd9508501b14c2d18250fd75dbad454a":"2020-08-10T01:24:46.987Z","0.0.0-8794f4189e230977d6c6167079ad37d1eedc3fe3":"2020-08-10T02:55:59.854Z","0.0.0-629c6d6fb062dfffa3c3d373b4dc46149c028982":"2020-08-16T02:17:09.636Z","0.0.0-df1c3bd4acfb65cdec85d6a857832051cecc81a6":"2020-08-17T22:47:28.810Z","0.0.0-f0edbcb1d2156d40da893373c26f20457ce0238a":"2020-08-20T07:31:56.353Z","0.0.0-03cc2601c20f4c3acdeb484323aa8f9cd7fdeb9a":"2020-08-21T11:20:39.072Z","0.0.0-4cb446be76ddace2d397d16731955cedaf9eb717":"2020-08-22T13:36:59.048Z","0.0.0-7ab0390f892063e051186e16b1d793aff79e5c16":"2020-08-22T14:28:45.557Z","0.0.0-69ac22db6b25a6703891cfac9ee81fe4f8596e39":"2020-08-22T15:20:14.602Z","0.0.0-bb1ac1b5c523ee187c0a9c78572a618208d1f7ce":"2020-08-23T17:38:13.225Z","0.0.0-7aac103f6fe853f68f0f7c889944c65152e6f76c":"2020-08-23T18:39:13.278Z","0.0.0-d6e62b36c6d8be90280c3f84b2baa417042710dc":"2020-08-25T11:54:29.952Z","0.0.0-33b8ecb7362ca947208de1d8897c4d75ae5cc689":"2020-08-26T14:58:33.192Z","0.0.0-63bc677ca6b4baaa1c4db38637c7e16f3350dcfa":"2020-08-27T17:49:40.970Z","0.0.0-604cff5b06b4d87c7532935033156dcc02806ae0":"2020-08-27T18:53:01.754Z","0.0.0-51978a3e987263f170defce0fa9976e87db26586":"2020-08-28T20:57:54.432Z","0.0.0-a68779c6ba0663b26ba8e8554afe71278c26cd96":"2020-08-29T22:45:19.270Z","0.0.0-eb4e64288d12894712c9c0cda5c9a61b48d7ecd7":"2020-08-31T01:44:16.156Z","0.0.0-0e85c45237eba33e35d96732d9e8b55f604eb7a4":"2020-09-01T03:41:36.583Z","0.0.0-705c9e720e11332cf73586dcf62f930c569cb212":"2020-09-02T05:12:03.741Z","0.0.0-42d8ed839cdf848abbedad31e5c916666eef395d":"2020-09-02T06:20:05.698Z","0.0.0-b841dd34c7f0c426c0949fbe5cff6eef48b76a93":"2020-09-02T07:28:10.942Z","0.0.0-c6f9f767f5e3e0b4565a6a2f27019ec596137203":"2020-09-02T08:59:13.993Z","0.0.0-508760d1639f95a9b95ff68f24667f34d8805328":"2020-09-03T18:02:49.368Z","0.0.0-875589586c741feeb29e8fc0f1c22f2ae053e833":"2020-09-04T05:25:11.910Z","0.0.0-e6547cf5671ea18bb67203bc23d6080bfa037542":"2020-09-05T07:39:00.537Z","0.0.0-60a61e1455e1c2da7804644a2c7ebc2b482853df":"2020-09-05T08:34:17.162Z","0.0.0-56516e36d95034c307a7fb9e44904a08393c758d":"2020-09-05T09:36:06.740Z","0.0.0-f872de2d487bb4f43b6c51559754e64a83e1f0b6":"2020-09-09T07:43:07.826Z","0.0.0-0cc18cb0d4a2b8c9771e4e6143511653ab1ab734":"2020-09-14T21:47:50.059Z","0.0.0-ae352fe43be9350ff101a513e39759d2fbc0cda8":"2020-09-17T02:38:49.347Z","0.0.0-99d14ea2694d7c45739dea5687e1d4a6a184e165":"2020-09-18T04:13:46.273Z","0.0.0-a70c0f55e239a032ffb027f79730c8df8727788c":"2020-09-19T06:19:29.797Z","0.0.0-77980f1f23dedc6978084fcb272a9223093e98d7":"2020-09-19T06:44:49.017Z","0.0.0-060cec439db25e38e33baeae8e3259f1ee13e7a3":"2020-09-20T08:53:09.568Z","0.0.0-d3e07365892a305b1f3b61d4c7185f634b011986":"2020-09-20T09:30:26.843Z","0.0.0-585d62b5227439ba90f4665913e6fd8b03758c34":"2020-09-21T12:10:37.004Z","0.0.0-18fea45c9532bc8fad450601046805ad8b2a251e":"2020-09-22T13:28:25.518Z","0.0.0-5b0d0055ec2fc6f6a498420c96ffc31ff0634e70":"2020-09-23T15:14:44.919Z","0.0.0-995fc0196530dc41480f619918fc40b5cb72d61d":"2020-09-25T03:16:51.790Z","0.0.0-3d455d3ab0d0980cd15e63fd94c8ffce79f1e6d3":"2020-09-26T05:50:59.240Z","0.0.0-d099315d3e2a0a1137e91a2b0daae1ae23468ecc":"2020-09-30T14:19:31.498Z","0.0.0-9709302d0ff36ba04d6be38bf5716001474c29f3":"2020-10-02T23:58:57.450Z","0.0.0-b09bb19c86c9afaeccc255aaf6508ca53df59525":"2020-10-04T12:32:55.659Z","0.0.0-a928bd838ad0ae285caee296325bba1dd6403d72":"2020-10-06T19:55:06.160Z","0.0.0-3f470b340d5dc34cb3eaf9c914f0d3f0f8db8ab5":"2020-10-06T21:12:49.150Z","0.0.0-134408928ca5887493a4a3232313995ced194167":"2020-10-08T00:14:11.076Z","0.0.0-20c0bc35a23bea23c55af7761a45c0fbe14d181e":"2020-10-09T06:19:57.924Z","0.0.0-7deb9561a5a2bae842c76f9f08f0717630a0769b":"2020-10-11T20:34:24.989Z","0.0.0-03c275cf13d75fbc64310f90ce85121e0f314fbb":"2020-10-12T22:58:56.812Z","0.0.0-8b0f4c97cb7fcb98eeac98c830d514cf7abd77fc":"2020-10-12T23:15:35.658Z","0.0.0-cedcb3a858abdf871e195b9cfb63e574e8e8a4f1":"2020-10-14T07:13:50.114Z","0.0.0-a2d653cb6bf37e1bafd11c9d5fbfdfe78364bf59":"2020-10-15T09:18:57.965Z","0.0.0-2645438a493a72cd23dda854195360c9355bc3b3":"2020-10-15T10:36:55.790Z","0.0.0-deaed8d97e59d0216bd25f5aa17c75a4a7b575c9":"2020-10-16T13:22:41.711Z","0.0.0-a632516e031f8c3b76f955894e8bcde9b9f4628a":"2020-10-16T14:25:02.934Z","0.0.0-40e4bcebbf748987eadea7c4b358922030ea568d":"2020-10-17T16:43:54.771Z","0.0.0-15ebc72a6249f82ae2e3c53f3c421a0f297f55ed":"2020-10-18T18:35:01.321Z","0.0.0-03b69f70466ab3f44d5a32bfd855388ee9d6ccd6":"2020-10-18T19:29:00.509Z","0.0.0-37d6d28c63ede4af0e8584d7e9dafc729072d8d7":"2020-10-19T21:31:32.952Z","0.0.0-f6d11ad3a00180411c651d15c96cdea3d255a635":"2020-10-20T23:47:09.574Z","0.0.0-d8dca1104379d1d11acd12c2da9794ae72145d59":"2020-10-21T00:53:37.385Z","0.0.0-0fcc1b68a07b056853928fe5559d4460a0802586":"2020-10-22T03:10:46.141Z","0.0.0-e85863d97c098927901243fdec282871cc5ddaa7":"2020-10-22T04:24:22.112Z","0.0.0-a6cf46229c3fc69edcf7f047ed9320ca77e7ec8e":"2020-10-23T06:39:09.638Z","0.0.0-9146a1d6437f9126cb42d382e970b07e17fa859c":"2020-10-24T07:39:05.347Z","0.0.0-03acbea821f76192f1c94c7c967d4c6d83dda075":"2020-10-24T08:17:21.558Z","0.0.0-ad871fe90d0ee9eabc6c6cd539b36684a496d99a":"2020-10-25T10:29:28.172Z","0.0.0-3e238e537ec77500690045b6966bcbe4ed23bb37":"2020-10-25T11:15:44.663Z","0.0.0-9629f2a9fb028e78dc00af1559d1116d2caaa10b":"2020-10-26T13:23:03.333Z","0.0.0-c6b783385d5075e592873ea8be2dd378c4cf057c":"2020-10-26T14:20:13.649Z","0.0.0-99d87cbcb1c6e968a4d194501b6d45f7be18f383":"2020-10-27T23:30:06.324Z","0.0.0-7ca39f79ff04d93dffbecc1a7e08fcde65671b71":"2020-10-29T01:35:54.919Z","0.0.0-6a7cc8cc5212311446d9cc7989cfe45b5f42a8c1":"2020-10-29T02:55:59.654Z","0.0.0-f21e30b9cbbf912256b26f1dbabd596e809474a7":"2020-10-30T04:09:08.166Z","0.0.0-5885992cd3707762a9db304986b4702e5959c76f":"2020-10-31T06:27:38.957Z","0.0.0-2d1b4e8e49bcbeffb295649bcb5fa0b9f3e17d85":"2020-11-03T10:14:39.911Z","0.0.0-4b5edfab96f28f4a73bf830ca941caad03edf479":"2020-11-04T18:16:14.659Z","0.0.0-dcd37652be28aed2b0c33cc11f3e7b2366a00875":"2020-11-05T20:43:41.554Z","0.0.0-5e29482bb11a4d56943e8437361409c4ac7b73e2":"2020-11-05T21:58:22.160Z","0.0.0-b2b45881e56ab2d92796f6839ef4f77f7cdaa81e":"2020-11-06T23:36:16.196Z","0.0.0-42ff4eefd5f4c007ddd8f515de72aedf6f55074b":"2020-11-07T00:54:04.717Z","0.0.0-6bc9cb25ec58f65398ba3f4e1e70df154594c835":"2020-11-08T02:48:03.534Z","0.0.0-a60514118d61b05939ab0076ddf570828a4db124":"2020-11-08T03:55:54.365Z","0.0.0-cf3df3eba47c9537e5aacd9b273bc92ab298770a":"2020-11-09T05:49:49.338Z","0.0.0-ac7df026e8a7fc077c85fb7977855da51ebd4c36":"2020-11-09T06:14:22.316Z","0.0.0-b7b925e95fa092c146ca140283e083c2d7bd2bb0":"2020-11-10T08:36:55.605Z","0.0.0-9c4eda6523537986e87778e9e39664b67eb3e844":"2020-11-11T09:47:48.195Z","0.0.0-59bc105c0bd5b31e49d48e73f3198af0975fcfb0":"2020-11-12T11:52:32.589Z","0.0.0-b4d0d2b14b4e4c2d4a2e201c130172146c8f170e":"2020-11-12T12:57:21.087Z","0.0.0-94b60e7e52b56bd382cb8249770180e78bf65d01":"2020-11-15T18:26:34.389Z","0.0.0-002604046859a44c925b40c33ac719096aabe56c":"2020-11-19T08:41:19.333Z","0.0.0-d558ce44788c145a1dcdba08d65e5e3f488a3ca3":"2020-11-20T12:28:31.009Z","0.0.0-10d85d9efc9b70147619ea7d1cc4cc99c0436975":"2020-11-21T14:50:23.732Z","0.0.0-d4ed046a80b7ab82767e36327cea438c121459ba":"2020-11-21T15:47:03.707Z","0.0.0-4721a6dbfafd4a654f50455c32b513b9840b83c5":"2020-11-22T17:38:32.174Z","0.0.0-691cf1e692e056825a67d32593ad11e525cec42a":"2020-11-22T18:15:17.020Z","0.0.0-7527b670e9a373e6eddb84990b9eb3233be1934d":"2020-11-23T20:17:58.974Z","0.0.0-1fae9106052768ed69b25942b219713182d48a66":"2020-11-23T20:44:57.174Z","0.0.0-5713df320f34864998f983fa0e5ed4015138091f":"2020-11-24T22:51:41.690Z","0.0.0-ca5f535cc500616e40180239e2d0f79fbf39490c":"2020-11-26T01:29:49.406Z","0.0.0-38ab58ab4a894ea3a6b3af4a1d616590ab0bee2e":"2020-11-27T19:30:49.864Z","0.0.0-fda00e7e28a8718779995cf99f86162d6ceac8f8":"2020-11-28T21:35:19.605Z","0.0.0-daa166f353626c9225212a0ed677a51f8f77b1cc":"2020-11-29T23:12:14.575Z","0.0.0-02497e036b082ce33245acbeb9a6f6748abd445c":"2020-11-30T01:15:38.077Z","0.0.0-e36f2554c865244cbfd509ebc20af76fa91336f7":"2020-12-01T02:25:11.675Z","0.0.0-0e887eb6be87b7bc33070997cb3f38e0e24e9fed":"2020-12-02T22:14:31.216Z","0.0.0-12184254acd88e4078784bbf306f9f5a14fa3ce9":"2020-12-02T23:57:52.383Z","0.0.0-0c6f485baa68683a6f8c3c452a9957429ea17e64":"2020-12-04T07:39:37.372Z","0.0.0-2e39d91dcad014189bd3ead48178eee78ef8c76d":"2020-12-05T22:32:07.533Z","0.0.0-7920ff8bf928ccc55f9230aabbbe11bcd5b2e2ab":"2020-12-07T07:12:16.044Z","0.0.0-7ef14e4b20054d5a4e0276fcf7206b00c5654175":"2020-12-11T01:08:33.957Z","0.0.0-e40b3430d09dcc9d6ba486f887db74c6d4b8e75d":"2020-12-12T04:12:00.886Z","0.0.0-6af71192f18b10a678a4e71ee194730d806da2c2":"2020-12-13T06:46:00.565Z","0.0.0-836ea517dd18e6195c0665f5a33eafd970b2e465":"2020-12-13T10:10:52.358Z","0.0.0-0bbbf9c47df2e6892ece3c52261f7a49b0263be3":"2020-12-13T16:48:23.090Z","0.0.0-3223ed02b8bc0f21bb95f64eba70acbea3e679be":"2020-12-14T20:43:56.915Z","0.0.0-cb9d95edec42c9dc3330995138897848c7180f96":"2020-12-15T22:38:00.905Z","0.0.0-8928abf7c6d658779912a1ebfe08727aa42fc2ae":"2020-12-15T23:22:16.390Z","0.0.0-ba073b244d07da42c088fcdb0994133428e71bd2":"2020-12-17T02:27:51.520Z","0.0.0-c3f4cd68e2ccf87bca51514cbfd5fcb9b10da6d5":"2020-12-17T04:19:32.639Z","0.0.0-cc8fb7092bcf1bf16f42c16c2ef82e08cd9af402":"2020-12-18T05:32:09.080Z","0.0.0-b47d52a46093a3d601d6737126af936743ae860b":"2020-12-19T07:38:43.075Z","0.0.0-f8fbcb4061501187aa8afc16d572a6cf3e4dad50":"2020-12-26T21:13:49.353Z","0.0.0-2d6e770ad48966772b8a88c6e3a0822c15be1d80":"2020-12-29T20:25:24.687Z","0.0.0-15159eb80e6201d4c473a05599248ac524909292":"2020-12-30T22:28:06.993Z","0.0.0-48f496391f156ab4818cc78e613d23e869531991":"2021-01-01T09:27:59.313Z","0.0.0-b44e752ff6da92a13718f1e96de009bcda4913ed":"2021-01-02T11:15:43.965Z","0.0.0-00961cd102cbf689bc085a259fe88131bb3ce480":"2021-01-04T22:11:57.019Z","0.0.0-e164ba8434a00f689d53d7502940625a4baa2bd7":"2021-01-06T20:13:03.990Z","0.0.0-e1ef9f03d059c1a50d05101fb0c93c50ec71e2cd":"2021-01-07T22:25:50.371Z","0.0.0-7a5a92a43269ba69e906564622349c2a120f2394":"2021-01-09T00:11:19.764Z","0.0.0-242ad0c3224e80e48ca87c8a8b5427849a83188f":"2021-01-09T01:40:43.573Z","0.0.0-2357a3bee7e44bf0e8543cb047670b58f8d47b5d":"2021-01-10T10:26:53.312Z","0.0.0-84fb60c59821891d9528b45ece79d603fac976e3":"2021-01-11T20:36:08.071Z","0.0.0-6ccadd65cdc4f0f7913def943579014d457637fb":"2021-01-13T01:25:50.218Z","0.0.0-1014d05cfdb848c79c9f6889ab73023131f2fb0b":"2021-01-14T18:16:23.546Z","0.0.0-65dcb437e4c4e13acb8c76c3a55196bef5c5501e":"2021-01-16T13:07:50.442Z","0.0.0-1be0370c146e134adcbfb415c51c67d6569322c0":"2021-01-17T14:50:25.814Z","0.0.0-f2ae4219ed79b1789d245da0f68f77511518eedf":"2021-01-17T15:21:19.557Z","0.0.0-9b7b03e9bcb14bf96d59c3192060af7bd86d756e":"2021-01-20T09:55:12.337Z","0.0.0-c2b572f2af3d1bc0a91d634453600c48f729c75d":"2021-01-21T12:16:51.467Z","0.0.0-05859ce9ac72ece3bda7a7451cee61d001570de0":"2021-01-21T13:22:15.691Z","0.0.0-0b330b2d6f813c39b844063162ed834a1815813d":"2021-01-22T15:41:26.655Z","0.0.0-05a4c4d697e74564abaa1288c0214ed24685104c":"2021-01-22T16:45:31.045Z","0.0.0-71b1b051dc5ccfb1221f52104ad35d93d1590692":"2021-01-23T18:50:20.540Z","0.0.0-13e3f60fd54dd43e269b321d79789f92e2e5ccf6":"2021-01-23T19:50:28.495Z","0.0.0-6a231703ac52570a110f24087e804e56de10f80d":"2021-01-27T22:35:47.447Z","0.0.0-88fae242545e5ef68d5dd2258dace8bd797bc5b4":"2021-01-29T17:44:56.970Z","0.0.0-0c4fe3d13ca7663b7f909a2c81bef50cf9b7b4f2":"2021-01-30T19:52:39.900Z","0.0.0-e8a922e9bf89af72296b9934151fd0d8c48f2aef":"2021-01-31T22:47:32.319Z","0.0.0-b67e0847ebad38cdaeb3ed2f640a0d943b1d44c6":"2021-01-31T23:52:46.438Z","0.0.0-7f92402ea6b208e8b734aff0575781f9fe9bfa36":"2021-02-03T08:47:49.456Z","0.0.0-51033c1a392889089f7fabf8fd693331b62b49e7":"2021-02-04T11:22:22.654Z","0.0.0-fbad1ed8e83e0311d87cb9ec491e3c8fb1d892a7":"2021-02-04T12:26:56.036Z","0.0.0-b13751dd607eac0ea5d1ed821a07eff5ce956432":"2021-02-05T14:03:01.566Z","0.0.0-a6576d69e2bd88a30093658e1651ba27bafe5740":"2021-02-05T15:56:38.852Z","0.0.0-36c27956bf73cc168e81f4b221fe17e466843ccb":"2021-02-06T17:39:25.410Z","0.0.0-f89f97cc9619feaa09e2e36ed6c97fba97bfc36a":"2021-02-06T18:52:39.594Z","0.0.0-205b897fa4f4193759f54f6a2230c210d2adac9a":"2021-02-07T20:45:48.547Z","0.0.0-792496066d6d4772d2da2c3ceb0eda3067284440":"2021-02-09T19:22:45.841Z","0.0.0-58f6769745a7da54adf64a3169f085b05bf8a3c8":"2021-02-10T21:17:46.074Z","0.0.0-bcf98dd3ea27a32821eebdcf6ab9a115a5238b5b":"2021-02-10T22:06:36.296Z","0.0.0-0ba40de19c20384ec27315502b3670fc3430322e":"2021-02-12T00:39:51.502Z","0.0.0-5bbeb0a479db65113d89e142435bd73d96d2476b":"2021-02-13T06:11:46.686Z","0.0.0-15d0686ee5c8c7c2db0793de44454fedbadd8805":"2021-02-14T07:31:00.772Z","0.0.0-1e9f07f2399a24cd2c7d66df56bd1b98debe323e":"2021-02-14T08:26:40.088Z","0.0.0-58aa5107b14137052d83b824eb3314ffe686f470":"2021-02-15T11:22:40.995Z","0.0.0-612654473b6460379a226037bf9fbabbc4faf9e7":"2021-02-16T13:01:48.812Z","0.0.0-c4eecee0498f2b114679cf4ef053cc884e9ad098":"2021-02-19T17:13:03.603Z","0.0.0-98f71c71663a706040646e8764f257f94fe8778a":"2021-02-20T21:08:49.551Z","0.0.0-07b5cdd6bdbce54286862c7363e4482037e4b93d":"2021-02-24T11:54:03.968Z","0.0.0-f7bbfa4739d8b4f0818162ee52512d9f24bad87b":"2021-02-25T14:26:33.940Z","0.0.0-d75046d0780b9ced3e060a01ee2132e5e669550a":"2021-02-25T16:37:30.592Z","0.0.0-230f04a4a319772a3f945a16f91066c7925454a8":"2021-02-26T18:56:15.246Z","0.0.0-d2185534b401038205ec168a1602abce024b78e3":"2021-02-27T20:52:56.056Z","0.0.0-96dd0eb15d519a89a597d224dccdaee0c17e4257":"2021-02-28T22:32:26.653Z","0.0.0-e615895f3e4274ed8a21ec22b2c514ea98b15d38":"2021-03-03T03:39:24.077Z","0.0.0-9cb5080d71294c68deec2992d71fc5d9a575ef6d":"2021-03-05T10:39:03.657Z","0.0.0-7fb44d76979b3d1e9c69038b94d0008eec6313aa":"2021-03-06T14:26:04.295Z","0.0.0-2d5037612dcaae0bf475bc2c976be5ddf9c1ca9f":"2021-03-08T16:02:25.104Z","0.0.0-efba7bbf7a9440f63e5b7a2054d92ca44361721f":"2021-03-09T23:35:16.479Z","0.0.0-42c00301ddc8ffab3be68b522f562b0720a4cf01":"2021-03-10T01:43:24.548Z","0.0.0-85790db8a36cb591e41045d5a51379100b2ba511":"2021-03-11T04:03:56.571Z","0.0.0-154094a3d820f23730466f8834fc8289cdcc6d1d":"2021-03-12T16:58:04.609Z","0.0.0-91045ac354422a559b41a723b4532c284766d126":"2021-03-12T19:22:51.859Z","0.0.0-fd84c4fba9699fc65cd88cdf94424befea8c422d":"2021-03-17T19:07:37.505Z","0.0.0-1def8955578146d6f3bad4dbd676def6e992ea9e":"2021-03-18T22:15:42.693Z","0.0.0-107373b14df139b77500c90b8c5010098ba4fe60":"2021-03-19T00:17:35.221Z","0.0.0-0dc9428f111f69185a155c31bb6056dfb9578209":"2021-03-21T13:30:37.091Z","0.0.0-6556c241578c608f7f9a7a8bb1065cd0bfae5616":"2021-03-23T02:39:13.764Z","0.0.0-2b690d6807e5fb93a4946bb6ab272a504baf8bf1":"2021-03-24T05:37:03.883Z","0.0.0-b79c58207b159e1ffff1b619cb31d571a00cc04b":"2021-03-24T11:17:16.019Z","0.0.0-468c15fba2f888f17fd656c39355f5bec23003d2":"2021-03-25T16:50:04.449Z","0.0.0-fbb8e26b0d3c94ab53ebb5929e40f2e2694e9d89":"2021-03-25T18:35:45.120Z","0.0.0-fcfba01383d77c32433dbee172667ca63e20a519":"2021-03-27T00:57:25.029Z","0.0.0-305f6cd89a10b27587c9532e26ec5502552cab0a":"2021-03-28T05:06:59.519Z","0.0.0-e65ca6429ae7af163bbe7c7d6e3d1a46246b2ccd":"2021-03-29T16:16:33.607Z","0.0.0-5224599f5fad5211a7b4744504c8d70d37b36f81":"2021-03-29T23:47:05.845Z","0.0.0-f161033e4b7f4631c0a6b20834c0273dcc6bff67":"2021-03-31T01:56:42.749Z","0.0.0-272f05d90c403ba52e0e111210d3d9db724ecd45":"2021-03-31T02:35:06.077Z","0.0.0-78c866c6e8f55980808607e84601c760164b11f9":"2021-04-01T08:48:45.672Z","0.0.0-ab3a89d0085f91879e7bfe9995f2dbeaedbe456e":"2021-04-08T22:46:20.839Z","0.0.0-5c655ee1818cc39f01d095b93bb92b101df658fa":"2021-04-10T01:31:20.754Z","0.0.0-2d6b66c429efd079b55221400e24ffaf9f465aeb":"2021-04-11T10:49:55.444Z","0.0.0-1811fa2c6f27390210e92b2eac315fca5338690e":"2021-04-14T10:02:13.878Z","0.0.0-db9a124b446fa82112860ecbcad5272e9cf707c0":"2021-04-16T20:37:50.955Z","0.0.0-3b85f6f2d7f48410b5835af17f6f8e793d9687d3":"2021-04-19T23:28:16.616Z","0.0.0-2be813c94d0fc8d7ae15cb5f33e3a6907d11c91b":"2021-04-21T23:18:29.628Z","0.0.0-bece5322a6206990b477c185e134cbb1171fdc81":"2021-04-23T02:44:22.035Z","0.0.0-66742da49f9e5889d8db55a7a767a3e3a39483f3":"2021-04-24T13:49:55.964Z","0.0.0-6ec7778fdc0713dcfab1c101cf72fba46b441908":"2021-04-27T13:47:24.030Z","0.0.0-030c7e6f5d0aa44c8ad8fee8f3a323ef0d898291":"2021-04-27T14:25:56.139Z","0.0.0-acc52f6a246e03c9f618db309ac07e60abde796e":"2021-04-30T10:29:07.897Z","0.0.0-d8a9ecd751ee1a6d5e881ad206cd12526a55aae0":"2021-05-01T15:49:55.215Z","0.0.0-a202f5800ac77112eefd5321aab1039039546743":"2021-05-04T22:49:20.338Z","0.0.0-d8fdf058598d47c58fe26b0fe50ba603e0278c60":"2021-05-06T01:28:43.688Z","0.0.0-194d5c9190a6b9fa9910885969b811029cd5b2a2":"2021-05-06T02:55:32.713Z","0.0.0-9a61f9f3d36eee4ecddb89ad975e795b5245dd7d":"2021-05-07T07:58:54.322Z","0.0.0-edb954817768f5280dc71e290d17503d182859c7":"2021-05-07T16:26:32.623Z","0.0.0-4e87104d2b61049831a11a4ab2433517add85a23":"2021-05-08T18:13:04.913Z","0.0.0-ccf71c02fa65d13b962e30848b03c304b4c6ea7c":"2021-05-08T19:52:02.499Z","0.0.0-455a733b3611f3b05d771be41160a3c84fad846b":"2021-10-03T16:56:45.563Z","0.0.0-fc0e568c021718b56906d85a6518128ad3baf86d":"2021-10-03T17:07:21.212Z","0.0.0-54e701c3feca1ee6f257cfde82913ec8a4b83704":"2021-10-03T17:08:16.999Z","0.0.0-f69abbaccfc32632547bf9fe3a705038dc66db56":"2021-10-03T17:20:11.115Z","0.0.0-2a13c181ac0b3f4914053c4fdb01e6dbce584917":"2021-10-03T17:43:49.414Z","0.0.0-a076e2de0b6d2c7d24d6e707b123c45ae54ccad7":"2021-10-05T09:52:44.557Z","0.0.0-149e3793a8461c8b40fa7363223844385f8f229c":"2021-10-06T12:37:02.285Z","0.0.0-6f8f7b2cd0cc0a871787c3f72b0b6830981a6464":"2021-10-07T14:47:43.251Z","0.0.0-63d13ca5c0559113635d460c7cde926d48f125cd":"2021-10-08T18:19:32.431Z","0.0.0-e6e82b97a6bb75f7ebb5405619eb42a7fe0fd358":"2021-10-08T18:21:47.974Z","0.0.0-5ba78812df99999ed5273209069ee72f4b020068":"2021-10-09T20:43:04.718Z","0.0.0-e92f6787f614c516484fa7bf7e36242675a092c5":"2021-10-09T22:12:36.328Z","0.0.0-8a2f5c4ea6829c0e5b91579e70e1c069943fdf58":"2021-10-13T20:53:34.515Z","0.0.0-a89ec601f266d8c357d214e768021b4b588847ee":"2021-10-15T01:43:51.538Z","0.0.0-4d28ff8f03505fbe38e1786492ed699b22e046f2":"2021-10-15T01:46:37.002Z","0.0.0-908ba7104ba5c3dd84700ab81177ed9351d08c19":"2021-10-16T04:43:02.870Z","0.0.0-cd31973f19b425b2c10a3e6c0cfcc51e21abac2b":"2021-10-16T04:44:45.729Z","0.0.0-307c1627754ff1df7e27bbe217a5a659e9dbe644":"2021-10-17T06:34:03.866Z","0.0.0-d228d6eab3eb56b130d2c967db34bc6209832dfd":"2021-10-18T09:19:47.543Z","0.0.0-59f81757e6d6f0ae23b41267de32786b76848786":"2021-10-19T15:11:42.726Z","0.0.0-9423a4a57689eaa83c9e16d7079171c98c843fd5":"2021-10-20T18:09:46.933Z","0.0.0-5e5803a701ed617e1bb3401a3f3c319152175064":"2021-10-21T20:03:46.515Z","0.0.0-8773ccf330b13829188c70416b0a3620f6b06169":"2021-10-22T22:09:26.374Z","0.0.0-7da42b1be3db2a9840dbc73c86e69e4b7499716f":"2021-10-22T22:11:54.487Z","0.0.0-c35186414e7871cc9b668ab046076c3d3aedff30":"2021-10-24T01:33:57.847Z","0.0.0-4fbcbf9847b62891c2a718c7482e7217da3aaf1e":"2021-10-24T01:35:16.624Z","0.0.0-f2b456d2b4050aaf895ba650553086540871afa1":"2021-10-25T14:00:28.937Z","0.0.0-0d30198ce0cbdba2e65fd3cff37d0fcbd489b0b9":"2021-10-26T16:46:07.871Z","0.0.0-e61110ecab7d397f254db3af3c8e48c15bfe0308":"2021-10-26T16:48:32.529Z","0.0.0-d00541ddabe5c88b79897e82a4ff1014e1ba5fa0":"2021-10-27T19:36:46.826Z","0.0.0-7d17ffb5a0bc7eb1bf13729142fbb0b9994b3e1f":"2021-10-27T19:38:23.326Z","0.0.0-b3ed090ec4a83f6eeae1291372c0a4467df4b96d":"2021-10-28T23:12:26.792Z","0.0.0-e933f0d4eceff140f0106d183c0f15a330efa57a":"2021-10-30T18:57:33.110Z","0.0.0-c544e4e191c0039b0b92eeb7313a96be29ecce37":"2021-10-31T21:00:11.107Z","0.0.0-658b34bde88c9efcab3b8da887e85850f89a25c8":"2021-11-02T11:42:57.561Z","0.0.0-272401ad5e35d865a4b63df7086548bc1b51ab8c":"2021-11-04T12:29:39.247Z","0.0.0-49bef348397431d996ed3b013f1041e22dcea1b0":"2021-11-04T12:30:48.096Z","0.0.0-f07e5bf5398f339c4dd6d32904ea1c6fe5d3fab7":"2021-11-06T19:57:51.048Z","0.0.0-a540ba32b75e064f07d8fae0145ee18289627986":"2021-11-11T02:00:00.928Z","0.0.0-f3ae591acb92d7cfee1ebdae3b69fdb828b8688f":"2021-11-11T02:02:06.908Z","0.0.0-fc4191ce89ff7e51f4470a68f31f78071a169a93":"2021-11-12T19:07:35.121Z","0.0.0-4428aa5c621554b3b8168131c092754f943d54e9":"2021-11-13T22:39:17.505Z","0.0.0-03cb7cbb8f8a0c1a8a260ef6246cccc4eda91f84":"2021-11-15T03:38:10.833Z","0.0.0-3cd579f43cee6c6937b1155118a6f3f627333e63":"2021-11-16T21:20:04.573Z","0.0.0-37e136188ed10af9db7bd4d1874465bc103b1887":"2021-11-18T02:15:12.838Z","0.0.0-499014cf0d33602e40d53726e228bdeb9a77ac14":"2021-11-18T02:17:37.022Z","0.0.0-51b9d64a84cdc97224db44fd989285856bf685fb":"2021-11-19T07:37:06.314Z","0.0.0-b0839e572b551e1e98c3835dd3aae9eca5fe73e5":"2021-11-20T11:06:09.231Z","0.0.0-4cbf08274d8b2b543747bb51881219a12d7cb657":"2021-11-21T20:17:28.985Z","0.0.0-e5d7432b8c64f99e692bd22e77ff4347eab15c66":"2021-11-22T23:02:35.543Z","0.0.0-54c2886ca95971dbe85698c5a0bc7f0c567a213e":"2021-11-24T03:46:27.820Z","0.0.0-db18d5553302f8b28533f97cde796944faf6afe7":"2021-11-25T13:03:07.345Z","0.0.0-016dd03edd815a0427c220933709e377c847e94f":"2021-11-26T16:12:21.226Z","0.0.0-815e69919f6dc129b966febb63343cbb51718801":"2021-11-27T18:33:53.333Z","0.0.0-194e7393c74d66f24d542190475ffef1fd345110":"2021-11-27T18:35:36.074Z","0.0.0-a439c86d97316693b3f6a852e297644e24aa5ac7":"2021-11-29T15:40:27.573Z","0.0.0-fb0fd706b473d2725e54543f3a14c0a232df9919":"2021-12-01T12:08:11.714Z","0.0.0-76f111497fbdd2f9e657e979036b84354e4dc640":"2021-12-02T19:49:45.068Z","0.0.0-2041d20395347de674f75ccc90c718a20d24f497":"2021-12-05T19:19:14.968Z","0.0.0-61cc0d90a960e0865dc212af4bb7ab3f99f5f6a7":"2021-12-06T22:06:19.947Z","0.0.0-95bb371394702543822a40cc956ace02a5ecd6f1":"2021-12-08T01:45:22.407Z","0.0.0-4d520e118223db9fbfbd80df8bc1f5a1b61faf8d":"2021-12-09T11:06:49.843Z","0.0.0-2cb98dbeba0209f59e5a4947c160dfe791cc4554":"2021-12-10T15:09:37.370Z","0.0.0-855bf1019add6c5f6e86c9e9a084ca0e61b81077":"2021-12-11T17:43:07.822Z","0.0.0-5ca22f1ffc4414ceb2082f25bbaf158d2ec76efa":"2021-12-11T17:45:11.931Z","0.0.0-5d9daf25a520c373e7100962a402a3ab944a4cec":"2021-12-12T22:25:14.298Z","0.0.0-77066a3424bf77e5bfc5766fdb8f3b0929baca05":"2021-12-15T00:34:43.436Z","0.0.0-68c1f83df9e60ceda8aa975330a665070d4b11af":"2021-12-16T04:37:09.449Z","0.0.0-cc736a0c28be38858eb6b2d0a7dfca8f9ea8146d":"2021-12-16T04:38:29.033Z","0.0.0-7b6d22a74436d47d7fa91f197c727d82c2ecf431":"2021-12-17T11:25:35.849Z","0.0.0-d9e18d8d2be4048dfb53c39b306af8c37ee1d9be":"2021-12-18T14:08:55.549Z","0.0.0-b760c2b4662b815e121ffd65ef90c4b027cb78a6":"2021-12-18T15:14:59.453Z","0.0.0-93c5c4c9071946279117e8654b27583d457bd672":"2021-12-23T20:01:07.879Z","0.0.0-aab2926395bdbd90eefa3772e898646beccb0ba5":"2021-12-24T22:51:26.338Z","0.0.0-004bf5170854eb2457d11ce396385acd22aa4b43":"2021-12-26T01:44:49.266Z","0.0.0-d4c0fbbaa011b58720aaffe32e34ccdd99e4d334":"2021-12-30T23:31:37.422Z","0.0.0-7b79a200ca44e2c6b98c27bd44d3448978e4f8cd":"2022-01-01T03:38:58.673Z","0.0.0-13677b5121734112f8dd8d54b43becb2eff98b9c":"2022-01-01T03:40:41.504Z","0.0.0-8b6083c45bcb6a6aa7c58f6266541b428acef050":"2022-01-05T13:46:28.180Z","0.0.0-7e9c96f1825f1c50f415b0f7eb520e1a19b202ef":"2022-01-06T18:09:07.464Z","0.0.0-c1a55035a96a9c79def97593c2a236f87e82c22f":"2022-01-13T04:33:00.922Z","0.0.0-fd943101124c0f1ad0cc19fc9b711eced74dfe16":"2022-01-14T09:35:49.721Z","0.0.0-96c613c945e90196f9380cc23f2198efa0c71c07":"2022-01-15T18:18:29.357Z","0.0.0-f6c55186b0f6a5523456ccea9bc99450ad5fc1a1":"2022-01-16T21:57:43.533Z","0.0.0-70c7b288ce3d4e13b03b6f7786b065507a39f29b":"2022-01-21T18:52:40.172Z","0.0.0-c9b95520b3ee888f9baa7f7f69715c3a320b8e4b":"2022-01-22T22:22:13.968Z","0.0.0-11fc16ec8f8020203b4cade9f2ddc537cc9e7ae4":"2022-01-22T22:25:01.769Z","0.0.0-71cf2289760a73b138b1873c9b6649a31d84faa4":"2022-01-24T02:31:02.788Z","0.0.0-966d2a7c32e992cbe9ebd8bb07de093fa892b6da":"2022-01-24T02:32:22.217Z","0.0.0-d20a3dfa8d60976535afe7b8ab79cadd5517a298":"2022-01-25T16:42:55.058Z","0.0.0-de4e29ccc5a17edf11c9d2f7a3f4b31a8aa308d6":"2022-01-30T04:58:00.320Z","0.0.0-5c2f5c3a968642bd4dc92a87d58c038239e60af9":"2022-01-30T04:58:59.533Z","0.0.0-1c3c40f15be3417d8222e84e7c129776aa709934":"2022-02-01T20:21:02.276Z","0.0.0-0a9a0ab0ecf4f24cdd39069eaf2bfd5649ab5cc2":"2022-02-03T12:54:12.609Z","0.0.0-b7ba57bee1b1ad9a60918bbd2c15a7279ae9dd01":"2022-02-03T12:56:19.285Z","0.0.0-6c4e86a939185a68eca58ab942032e78d2f095fb":"2022-02-04T15:06:49.053Z","0.0.0-b9970523f94ebe936fc3d6e172242a0f7642632c":"2022-02-05T18:21:37.605Z","0.0.0-3ab2809ddfcbdea904c3b4edb4215e1ad6bd4375":"2022-02-06T21:48:01.144Z","0.0.0-1175e546669717e09c71cfdfeaa899770b42601a":"2022-02-08T10:30:47.609Z","0.0.0-b7f868e2e3e0f0af8ab820d895ec37329f6f8992":"2022-02-09T16:15:12.195Z","0.0.0-1fa5b9af486717dcdea438674e729ef8bae176d2":"2022-02-10T18:25:13.317Z","0.0.0-c729675bced0c25b040e282ffa4137be973e4924":"2022-02-10T18:27:48.103Z","0.0.0-23f7ace574e26b5e4e7794b353c6396c1188de01":"2022-02-11T22:18:31.854Z","0.0.0-8ff1be789833553e6bf02a5b35a4701c8ab380fb":"2022-02-11T22:21:03.604Z","0.0.0-fb71bdc4e90a26c85a31d900578a5f9616beb194":"2022-02-13T03:22:38.210Z","0.0.0-cacd9458b48a2da043cdb9138422a1c16752f840":"2022-02-16T16:23:10.094Z","0.0.0-21668258d6c871fe5019d968e4b04e166c2023f8":"2022-02-17T19:27:29.725Z","0.0.0-b0ce39c722f3c58ae03ceff0e519ba5cb1a32aae":"2022-02-18T23:26:42.851Z","0.0.0-5233eeb0283a7a1029cfbdc3289737e59c23b8d7":"2022-02-18T23:28:54.136Z","0.0.0-e5a290083964017a1892d767e28f611b8adf1ac9":"2022-02-20T03:47:48.763Z","0.0.0-7008f60e159bd42f86f060b1dade940aaaf43384":"2022-02-20T03:49:18.312Z","0.0.0-b6135dcc4728a1b506fcaaf924121e5daad002ed":"2022-02-23T03:32:09.356Z","0.0.0-d05382eba8f8cecbb8edec392eb1d05f0cff5653":"2022-02-24T08:37:47.809Z","0.0.0-584e59c2f1158c38d780a829a411d06fd2c7ff67":"2022-02-25T12:31:02.739Z","0.0.0-1177ed1c0c835b10e0ee6a962b523949eeb5a61e":"2022-02-26T15:34:28.211Z","0.0.0-c6f143385c4d3308753afed94317b70ffbe2fad4":"2022-03-02T09:22:13.661Z","0.0.0-0bbec36469b2d89366b4f32fe7efc8190625c2b0":"2022-03-03T13:30:32.331Z","0.0.0-b7fbe9e5a89c11837b522f6fb7235806a1f7d858":"2022-03-03T13:32:08.729Z","0.0.0-15a54e28f29e92d8d160015d7403592f8614b660":"2022-03-04T16:24:47.531Z","0.0.0-10570905055b72b0454a43829360b121575d614e":"2022-03-05T20:59:59.151Z","0.0.0-e20de00b4b479e1820a69b323e2a9cf5ee9736f4":"2022-03-05T21:00:54.439Z","0.0.0-ddfe25a5fae166d8b0ce473ecabfbad9c7c69bc6":"2022-03-08T22:33:57.060Z","0.0.0-760a84e19f352e774e1c51b814b4588bac719303":"2022-03-11T19:18:33.498Z","0.0.0-11a14be089f01745cca54bb70dfaf56126ff562f":"2022-03-11T19:19:44.521Z","0.0.0-d127cfe469e41c1f8658e57d2638db4c452a90d3":"2022-03-12T23:55:19.550Z","0.0.0-9337d6db414571b656743f5d30a5464e15871070":"2022-03-15T17:14:35.086Z","0.0.0-308ea8f3d77c70162cbb261619497d8ebc5d16ed":"2022-03-16T21:38:36.537Z","0.0.0-b8baed6bdf311a7233c0edbcd16c6088602fcd3c":"2022-03-18T00:50:43.585Z","0.0.0-1bddf2f5b717138faaefa9665ff5408e34469590":"2022-03-19T14:18:32.825Z","0.0.0-e5b76f9ab2cf1625ae4ab37c0b7167f512a38ece":"2022-03-20T18:22:09.108Z","0.0.0-5701c4ebde7d4fbed74a2f9608699fcb22e3ab5d":"2022-03-20T18:23:20.209Z","0.0.0-5c0b2e1c2b50a8d1a44f8f0992f246e00f5ccfb6":"2022-03-21T22:03:59.719Z","0.0.0-e40dbed62398f7f40224dd7d81eac26cdfcf8089":"2022-03-23T22:33:15.829Z","0.0.0-a1d4b4c139b40f35516b96187b6767561ae8fd4c":"2022-03-26T02:33:30.066Z","0.0.0-f6772a24403f71a17f1a735bbcfbcc089c036510":"2022-03-26T02:35:58.674Z","0.0.0-e033a4748a7069b3ed01b71a0f393b8fb2133f64":"2022-03-27T10:59:06.307Z","0.0.0-6854d5693516587ec4806792cf1dfa8d01287af0":"2022-03-27T11:00:39.874Z","0.0.0-5d14ccbf8dec4776cb0420742b36d71f765b18d2":"2022-03-28T16:00:01.488Z","0.0.0-0675318c9ca741c71e6fb799d5d97d409fc60826":"2022-04-02T21:24:49.141Z","0.0.0-bc9c7fe966fe0bf57145094c93d65453f8606d06":"2022-04-04T01:17:48.990Z","0.0.0-8c8792c889babb8d788b4ce99f669b4b253aa195":"2022-04-07T15:41:13.509Z","0.0.0-15ccb28b76f43fedf9885432ae9ef50c8b4cef89":"2022-04-08T21:13:23.624Z","0.0.0-b3203f958c759fd4269ebb1173fb67a024d0ab98":"2022-04-08T21:16:56.723Z","0.0.0-004991d83b6ba95b6622d8d610e4bbc062842fca":"2022-04-10T02:05:18.750Z","0.0.0-890a86954901ca88ac951851ab0d61c9ad8e255f":"2022-04-10T02:09:46.923Z","0.0.0-53651293c00c79f9d614cff7aed9f665833fdc7a":"2022-04-11T11:29:01.500Z","0.0.0-6914bd95fa4a7b0ad529b46b7a1aa27d41b6a580":"2022-04-11T11:31:01.288Z","0.0.0-ea55159a1a1fd0616c55aa25835a60c1f570a660":"2022-04-12T16:49:12.870Z","0.0.0-1622a18980a84ba9a9615b7d080db8d5281a44a9":"2022-04-13T22:44:41.444Z","0.0.0-88b76a6d41fc5ba3cf8b94f59f20fedcbb8595eb":"2022-04-13T22:46:42.100Z","0.0.0-3485298a7e027c3fb03f675086c05894c67efded":"2022-04-15T15:11:28.722Z","0.0.0-7fcfa255831a139c120468f53c883fd441159a0f":"2022-04-16T20:50:30.729Z","0.0.0-d823288a3b5e56e66eda7986844a6283e692f7b0":"2022-04-16T20:52:52.323Z","0.0.0-229515e7942cb2d828e0b4aa44e7a6a637167f2d":"2022-04-18T03:51:43.029Z","0.0.0-503c1a6a7bf3f47d7c1ca2d81a023cbe5a7f0544":"2022-04-21T12:56:31.240Z","0.0.0-8eab4e18db8cbdac3b8c2e18c2a95064307e0e0b":"2022-04-23T00:40:35.868Z","0.0.0-ea2342733ed4a3fdea6057858ddf3254ee7e0e38":"2022-04-23T00:42:08.091Z","0.0.0-9c6099482fc94b832d3558e841d4928f13062c05":"2022-04-27T02:01:12.445Z","0.0.0-9c35ddceebdb0fd84dc769c344e58d2e468e9085":"2022-04-28T06:31:57.547Z","0.0.0-e75d5c612d7c198403da8cb6825d3b585983f418":"2022-04-28T06:35:13.199Z","0.0.0-6f95973f787e4ebedee25f56c047c259a06b12d9":"2022-04-30T02:42:40.791Z","0.0.0-d99416d706fcc3c68793fa3a004bf3796aec9095":"2022-04-30T02:45:38.237Z","0.0.0-06fc463345cc4a5d38d86e36206ab17cc5bd097a":"2022-05-01T06:19:12.630Z","0.0.0-8af6d8cd2cbc45a1dfb5be2e3c65a78ac095bc85":"2022-05-01T06:22:04.246Z","0.0.0-85f8a88faf02ae4851d2a49c70663f61eaaae52f":"2022-05-02T14:21:16.751Z","0.0.0-75c149c864a16cd59bd33970a693f7df4eeada14":"2022-05-02T14:24:01.726Z","0.0.0-9844680435701316e397239a4cfc7c82f6bfd208":"2023-03-07T17:09:15.284Z","0.0.0-3e088c3494d991cfef11d13df06c9de990445785":"2023-03-07T17:17:32.696Z","0.0.0-c47ea58a7c281cbab29f3272c0a4d4c58dc2aaa7":"2023-03-08T11:07:00.574Z","4.1.0":"2023-03-10T09:12:35.756Z","0.0.0-d5904ec0b52f96a4d10e6fe044350061fdd80f6d":"2023-03-10T09:12:43.255Z","0.0.0-a57bc749c4e226a3fdbdba06656aeb6c1cd78043":"2023-03-10T09:18:05.412Z","0.0.0-dc744ccb0676b4f73c14ac6bf4ccac2228b91ca9":"2023-03-10T13:24:39.318Z","0.0.0-f4946b998f34a054fcede122c82188f34332dfc5":"2023-03-10T13:32:01.549Z","0.0.0-babbac2dee7588c7838fa396778732979468ab1c":"2023-03-10T13:35:36.011Z","0.0.0-eb53a985f455ca635b9c7e6c91de6dd49feb593b":"2023-03-10T13:39:12.637Z","0.0.0-25c9c192400408201b32829659a27b96402c0db0":"2023-03-10T17:56:31.802Z","0.0.0-b393a8003983cb4a51554152ce544f00ff3e8e6b":"2023-03-10T18:03:03.138Z","0.0.0-53f8d2295a730a5391f7071525c42440a59fcdeb":"2023-03-10T20:49:12.641Z","0.0.0-0d98e3d17d6a2b5b5bb744f751ba73663f34084a":"2023-03-10T20:53:06.381Z","0.0.0-0070e2439095043f8d3555e0621f89c461b28305":"2023-03-11T00:55:17.279Z","0.0.0-18b280745614fe8fe9ee414d4985ac8b27a9c643":"2023-03-11T01:01:09.587Z","0.0.0-664e077b06fb839123d503861aedb5332545aaff":"2023-03-11T05:00:48.953Z","0.0.0-6fb42934fbe689938da572d97c4ae698230c3e71":"2023-03-11T08:59:23.912Z","0.0.0-e9882c4aa5d52ed3845b0274ff5139cc52c379e8":"2023-03-11T09:03:22.068Z","0.0.0-0cf6d27b29a57ce6d6e441cf88d566c71796f551":"2023-03-11T09:07:08.987Z","0.0.0-122ec3b677a2513c2069434c579fb462819ce573":"2023-03-11T09:10:13.284Z","0.0.0-0a7be6eeadfa89fc67605dcaca7eb5638c4909d7":"2023-03-11T11:47:02.180Z","0.0.0-54a8471153ad557f6a17511c1d79d4ddcaca2fd8":"2023-03-11T14:00:35.148Z","0.0.0-94cf42ba18a504fa7af2d51e62b16fa9e70d7ce8":"2023-03-14T02:51:46.146Z","0.0.0-c25b2000b872f70700aa05aec1e26e326ba28594":"2023-03-14T22:44:13.020Z","0.0.0-47b1d93ea5b6b282a424a46dfca7936c292bb205":"2023-03-15T03:18:56.226Z","0.0.0-683334f7262605945b45d9e5f83170ab54f672eb":"2023-03-15T11:42:05.602Z","0.0.0-26b3e73060cf3133d50a394f403cfd6ed5180705":"2023-03-15T23:52:42.655Z","0.0.0-6b1a68846d755a5220b0f1e69ac778b4e9d369d0":"2023-03-16T02:32:54.088Z","0.0.0-cf2a36523f469678bc7e039d0a9b61d0ab2b12de":"2023-03-17T10:18:41.059Z","0.0.0-baa1253a9b187b619045446cfb2a8169c13dfeed":"2023-03-17T10:24:54.064Z","0.0.0-d104983ff7d56c820f1cc5b70220f0fdc7de90da":"2023-03-17T11:54:28.096Z","0.0.0-1d29da42cba8ac650875d10c2ee60250d62f3114":"2023-03-20T10:17:40.678Z","0.0.0-371935cd230927d3d54a8fdd21d11deb4f5d423b":"2023-03-20T16:07:23.520Z","0.0.0-f0d89df88f7af78d802ae1a2ab6ecfc8b5af5a5d":"2023-03-21T15:17:15.109Z","0.0.0-0de78ea865c46bc29c4542b46415fa180a77fc91":"2023-03-24T14:40:53.860Z","0.0.0-cacd38d798ffa1891aa6d9bf34bf45cd7bcc8385":"2023-03-25T00:30:53.224Z","0.0.0-d9de5cce1d7c67b7ae3b1cd9ce5c3d0e96d83b4f":"2023-03-25T02:49:48.385Z","0.0.0-f301c305854784cca787b37a49462dd35c978856":"2023-03-26T07:39:26.074Z","0.0.0-471994233098594a8b231926ddef6f619f7e40ed":"2023-03-26T11:12:33.705Z","0.0.0-3041d66a2e999dd70ad1d215848d52d61b17d276":"2023-03-27T23:39:08.345Z","0.0.0-277ef34d3ca3c60af714717cad634da94ebf7bd7":"2023-03-28T14:55:35.268Z"},"homepage":"https://github.com/mbrevda/react-image#readme","keywords":["reactjs","img","image","loader","fallback","react image","react-image","react img multi","react-img-multi","react image fallback","react image loader","react image preloader","react images","placeholder","placeholders","react image transition","react image fade","image transition","image fade"],"repository":{"type":"git","url":"git+ssh://git@github.com/mbrevda/react-image.git"},"author":{"name":"mbrevda@gmail.com"},"bugs":{"url":"https://github.com/mbrevda/react-image/issues"},"license":"MIT","readmeFilename":"","users":{"tehmachine":true,"kkho595":true,"rahulraghavankklm":true,"shoonia":true,"abuelwafa":true,"carlcraig":true,"nikaoto":true,"errol":true}}